規範
| 項次 | 規範敘述 |
|---|---|
| 1 | 類別階層以不超過四層為原則 |
| 2 | 不使用 ID，一律使用 class；ID 通常只用於唯一值與錨點定位 |
| 3 | 使用 OOCSS 建立類別工具庫 |
| 4 | 排版結構以 BEM 開發 |
| 5 | 導入 Bootstrap 4 的 Grid System |
| 6 | 使用 Sass for 管理擴充元件 |
| 7 | 一律採用小駝峰式命名 |
| 8 | 第三方插件在 Sass 的 vendor 分類中引入 |
| 9 | 使用 REM 或 vmin 單位 |
| 10 | 使用 flexbox 進行元件布局 |
檢核表
| 項目 | 敘述 |
|---|---|
| 網頁相容性 | 檢查各大瀏覽器版本，例如 Chrome、Firefox、Edge |
| 螢幕解析度 | 可自行設定 1920、1440、1280、1024、768、414、370、320 等尺寸；使用 Bootstrap 時改用 BS4 的 breakpoints |
| 可讀性 | class 的連字號、底線與駝峰寫法要有一致規則，並統一縮排與註解 |
| 可擴充性 | 具備元件化設計觀念（BEM 或自訂規則），不輕易影響主體架構與 JS hooks |
| 可重用性 | 自訂 class 可在多處使用（OOCSS），不重複套用多餘 CSS |
| 可維護性 | Sass import 結構清晰易懂，整體風格一致 |
2026 年後記
這份規範保留的是當時的團隊約定，其中 Bootstrap 4 Grid、Sass @import 與命名方式不必直接套用到新專案。現代元件樣式與 utility-first 的取捨可參考《Scoped Style 與 Utility-First CSS》。