CSS 架構方法論：SMACSS、OOCSS、BEM

Modular CSS 的目的是讓程式碼易懂、可重用，進而有效率地開發及維護。

SMACSS

SMACSS（Scalable and Modular Architecture for CSS）具有結構規範與命名規則，將 CSS 結構分類，並讓 CSS 與 HTML 分離。

• 作者：Jonathan Snook
• 網站：SMACSS

分類方式：

• Base：基底
  • CSS Reset
  • CSS Normalize
  • 不應該使用 !important
• Layout：圖層
  • Header
  • Sidebar
  • Content
• Module：模組
  • Tabs
  • Button
  • List
• State：狀態
  • Disabled State
  • Default State
  • Active State
• Theme：頁面上可單獨存在並可重複使用的元件

定義 Module 時，應避免使用 ID 或標籤名稱作為選擇器。子模組以原模組名稱加連字號作為名稱，例如 .mod-header、.mod-body。

<div class="fld">
  <p class="fld-name"></p>
  <p class="fld-item"></p>
</div>

參考：CSS：OOCSS、SMACSS、BEM

OOCSS

OOCSS（Object Oriented CSS）最典型的框架例子是 Bootstrap。

• 結構與外觀分離：與樣式有關的部分要獨立出來。
• 容器與內容分離，例如格線系統 Grid System。

.container .grid_1
.container .grid_2

<button class="btn btn-small btn-primary"></button>

BEM

Block（區塊）

• 在頁面上獨立存在並可重複使用的元件。
• 如同 SMACSS 的 Module、Layout。
• 每個 Block 都是獨立存在。

Element（元素）__

• Block 的一部分，也就是子元件。
• 無法獨立於 Block 之外。
• 有些 Block 可能沒有 Element。

Modifier（修飾符）--

• 用來修改樣式。
• 定義 Block 或 Element 的狀態或屬性。
• 類似 SMACSS 的 State。
• 同一個 Block 或 Element 可以同時存在多組 Modifier。

命名筆記

• 階層不要超過五層。
• 前綴詞：.l-layout、.e-element、.p-page、.h-helper、.col-、.fas、.fa-icon。
• Element：.button__icon、.text-field__label、.heading__title、.menu__item。
• Modifier：.button_active、.text-field_editable。
• 當時 CSS 通常使用小駝峰寫法，例如 .bookList。
• 依照開發規範選擇命名方式，重點是保持一致。
• 可以使用 BEM 設計模式與命名規範。
• 拋棄語意命名方式，改以工具性質命名（SMACSS）。
• 多參考其他框架，了解不同命名方式。

良好的 CSS 架構：可預測 → 可複用 → 可維護 → 可延展。

2026 年後記

這些方法論仍可用在全域 CSS；元件 scoped style、CSS Modules 與 utility-first CSS 則提供了不同的作用域與命名方式，整理在《Scoped Style 與 Utility-First CSS》。