CSS 設計模式 BEM、Atomic SMACSS 與 OOCSS 方法論優化維護效率

什麼是 CSS 設計模式？

CSS 設計模式 (CSS Design Patterns) 是一套用於組織 CSS 程式碼、規範命名邏輯並定義樣式與結構關係的方法論。其核心目標在於解決 CSS 隨著專案規模擴大而產生的命名衝突、重複撰寫與維護困難等痛點。常見模式包括：BEM（區塊-元素-修飾符，建立清晰層級）、SMACSS（按功能分類樣式）、OOCSS（物件導向，分離結構與皮相）以及 Atomic CSS/Utility-First（透過組合基礎 Class 快速開發）。採用這些模式能大幅提升樣式的可預測性 (Predictable) 與重用性 (Reusable)，是建構可維護前端架構的基石。

本篇文章將提到怎麼透過 BEM、SMACSS、OOCSS、Atomic CSS 等 CSS 設計模式 的特性來：

• 縮短開發時間。
• 減少需維護的程式碼。
• 優化結構與樣式分離。

CSS 選擇器 和規則們就像女孩化妝桌上的化妝品們，桌上總是放著各個種類，數也數不清大罐小罐擠的噴的擦的，在沒有預備知識和整理規劃的情況下，若要一個男孩子短時間搞清楚簡集是天方夜譚。

當交接新專案的時候看到幾千行的樣式檔大概也是這樣的心情，一般專案在未規範的情況下，通常都會發展為幾千甚至幾萬行 CSS 的狀態。

如果還不知道面試前端可以問什麼，歡迎參考：

• 面試前端，你還有什麼問題想問嗎: 一起透過發問知己知彼找到理想生活
• 面試前端讓你知己知彼的 10 個問題(上集): 軟體工程師不只是服務業也是良心事業? ft. 資深前端工程師 彥成

CSS 設計模式：四大方法論解析

這篇文章將簡單介紹四種 CSS 常見命名原則與設計模式方法論：

• BEM: 訂定可以遵循的規範。
• OOCSS: 將容器與內容用 "物件" 的概念進行管理。
• SMACSS: 依照結構將樣式檔分成五類進行撰寫。
• Atomic CSS: 撰寫原子化樣式。

無論最終選擇使用哪種方法都將受益於更加結構化的 CSS，風格也更容易被團隊所理解和適應，目標：

1. 可預測性 (Predictable)
2. 可重複使用性 (Reusable)
3. 易維護性 (Maintainable)
4. 可擴充性 (Scalable)

減少命名與維護成本：提升 CSS 效率的關鍵

寫樣式檔最大的維護性問題會出現在：

• 多人協作時的命名重複，用 BEM 或是 styled-component 可以去避免。
• 陳年專案不確定到底哪些樣式檔還有在使用。

針對命名上一般會有三個重點：

1. 看到名字就知道效果。
2. 看到名字就知道用在何處。
3. 看到名字就可以理解結構上的關係。

BEM 命名設計模式：區塊、元素與修飾符

CSS 在相關工具不太普及的時候就出現了 BEM 命名設計模式，其核心概念將樣式分解為：

• 區塊 (Block)
• 元素 (Element)
• 修飾符 (Modifier)

header__title--hover 代表 header 中的 title 在 hover 時的狀態

這樣的命名方法就像是女孩的化妝品們按照分類放進化妝櫃中，透過規範提供了統一又易讀的原則，有原則可預測性就高，就算什麼寫法都不去背誦，也可以透過這樣的原則來理解當時的想法。

透過模組化的概念，樣式不會依賴其他元素，區塊組合的概念也可以重用寫過的樣式。

SMACSS：可擴展與模組化的 CSS 架構

SMACSS (Scalable and Modular Architecture for CSS) 將樣式檔依照結構上分成五類進行撰寫，分別是 Base、Layout、Module、State、Theme。

1. Base: 全域設定，未使用 Class 僅設定像 h1~h6、body、a 等等元素，通常可以使用 Normalize 來正規化。
2. Layout: 網頁架構的部分，ex. header、footer、sidebar。
3. Module: 是獨立且可以重用的元件，舉 Bootstrap 的例子 <button type="button" class="btn btn-primary">Primary</button>。
4. State: 元件的狀態，像是被按到的按鈕。
5. Theme: 設定網站主題，像是暗黑模式。

OOCSS：物件導向 CSS 的核心概念

OOCSS (Object Oriented CSS) 的核心概念主要有兩個：結構與樣式分離 (Separate structure and skin)、容器與內容分離 (Separate container and content)。

1. 分離結構與樣式
   .btn: 結構；.btn-primary: 樣式。

1
2
3
4
5
6
7
8
9
10
11
12
13

/* 合併結構與樣式 */
.login-button {
  color: blue;
  padding: 10px 20px;
}

/* 結構與樣式分離 */
.btn {
  padding: 10px 20px;
}
.button-primary {
  color: blue;
}

2. 分離容器與內容
   Bootstrap 的格線系統 .col-x 就是用這種方式命名的。

Atomic CSS 設計模式：原子化樣式與 Utility-First

最近讀了一篇 Facebook 重新設計前端專案 的文章，Facebook 功能非常多元，原來的架構不再適合。

Atomic CSS 設計模式 是將各種可能的基礎情況都寫成一個 class，然後搭配變數讓整個樣式的撰寫能夠透過組合的方式進行。這種 原子化樣式 的概念，也常被稱為 Utility-First CSS。

簡化開發流程：Atomic CSS 的效率提升

原來的開發流程，要處理兩個檔案：寫 HTML tag -> 開 CSS 樣式檔寫樣式 -> 把剛寫的 class 塞回 HTML tag。

Atomic CSS 的開發流程，只要提早建立原子化樣式後續只需要處理一個檔案：寫 HTML 的同時就直接加上 <span class="mt-3">test</span>。

1
2
3
4

<!-- Atomic CSS 範例 -->
<form class="p-3 bg-primary m-1">
  <input class="m-3"></input>
</form>

開始使用 Atomic CSS 後我們會發現：

• 樣式檔的成長速度變成接近對數的曲線（不再隨功能線性成長）。
• 可以更快、更安全地修改全站樣式。
• 更方便地修改網站主題。

導入 Atomic CSS 可能的問題

• 建立時 class 命名需花時間建置符合團隊習慣的命名。
• 如果是用 Bootstrap 4 需要時間熟悉。
• 很特殊的狀況其實還是需要走回 BEM 命名風格去客製化。

FAQ：CSS 設計模式常見問題

Q1：BEM 雖然清晰，但 HTML 變得非常臃腫，該如何折衷？

A：BEM 的核心價值在於「避免樣式衝突」與「結構清晰」。如果覺得 class 太長，可以搭配 SCSS 的嵌套寫法來簡化。在現代開發中，也可以考慮使用 CSS Modules，讓工具自動生成唯一的 class 名稱，兼顧 BEM 的優點與程式碼簡潔性。

Q2：SMACSS 與 OOCSS 可以同時使用嗎？

A：可以。事實上，大多數高品質的專案都是混合使用的。例如：使用 SMACSS 的分類來組織檔案夾結構（Base, Layout, Modules），而在撰寫具體 Module 時套用 OOCSS 的原則將結構（按鈕大小）與皮膚（按鈕顏色）分離。

Q3：什麼時候該選用 Tailwind CSS (Atomic CSS)？

A：Tailwind CSS 非常適合需要快速迭代、且對設計系統 (Design System) 有高度一致性要求的專案。它能有效縮減 CSS 體積並消除命名煩惱。但如果您的專案有極其複雜且獨特的藝術設計，或者不希望將樣式邏輯與 HTML 深度綁定，傳統的 BEM 或 CSS-in-JS 可能更合適。

透過掌握這些 CSS 設計模式，您能更有系統地管理網站的外觀。無論是選擇 BEM 的嚴謹，還是 Atomic CSS 的高效，找到適合團隊的方法論才是最重要的！

• ← 上一篇
• 下一篇 →