CSS 模組化是什麼？從類別組合到命名方法論
CSS 模組化 是把樣式切成一個個可重複使用的小單位，再用一致的命名規則說明彼此關係的做法。它不是新語法，用的還是 類別選取器；差別在於有沒有規則可循。
樣式為什麼會失控
語法都會，專案還是越寫越難改，通常是這三個症狀輪流出現：
| 症狀 | 發生了什麼 |
|---|---|
| 改 A 壞 B | 選取器綁著版面位置，例如 .sidebar .list li a，元件一搬家樣式就失效。 |
| 不敢刪 | 沒人說得準某條規則還有沒有人用，只好留著，檔案只增不減。 |
| 權重越疊越高 | 蓋不掉就再加一層選取器，最後靠 !important 收尾。 |
小提醒
這三件事的共同點是：看到樣式，推不出它屬於誰。模組化要修的正是這一點。
模組化在做什麼
/* ❌ 樣式綁在位置上，元件搬走就失效 */
.sidebar .promo-box h3 { font-size: 1.25rem; color: #1f2937; }
/* ✅ 樣式綁在元件上，放哪裡都一樣 */
.promo__title { font-size: 1.25rem; color: #1f2937; }具體來說是四件事：
| 做法 | 用意 |
|---|---|
| 用類別，不用後代與 ID | 讓 權重 保持一致，蓋樣式不必比誰的選取器長。 |
| 樣式綁元件，不綁位置 | 元件搬到哪裡都長一樣，也才可能被重複使用。 |
| 一個類別只管一件事 | 改顏色不會順手改到尺寸，刪起來也才有把握。 |
| 名字看得出從屬關係 | 從類別名就知道它是誰的一部分，不必回頭翻 HTML。 |
BEM
用 區塊__元素--修飾子 三段式把從屬關係寫進名字裡，選取器永遠只有一層。
.card { }
.card__title { }
.card__title--muted { }它解決的是 命名 的問題：名字自己說明了「誰是誰的一部分」。代價是類別名偏長，且在編輯器裡不容易用元件名一次搜尋到所有相關樣式。
詳細用法請見 BEM 區塊元素修飾子。
OOCSS
把每個元件拆成 結構 與 外觀 兩組類別，再於 HTML 上組合起來。
.btn { padding: 8px 16px; border-radius: 4px; } /* 結構 */
.btn-primary { background: #2965f1; color: #fff; } /* 外觀 */它解決的是 拆解 的問題：共同的部分只寫一次，變化各自獨立。代價是 HTML 上的類別會變多。
詳細用法請見 OOCSS 結構與外觀分離。
SMACSS
把整份樣式依用途分成 Base、Layout、Module、State、Theme 五類，各類有各自的命名前綴與擺放位置。
/* Layout */ .l-container { }
/* Module */ .card { }
/* State */ .is-hidden { }它解決的是 分類 的問題：新樣式該寫進哪個檔案有標準答案。代價是前期要先建立分類共識。
詳細用法請見 SMACSS 五種分類。
三者不是三選一
這是最常見的誤解。它們管的根本不是同一層：
| 方法論 | 管的是 | 產出 |
|---|---|---|
| BEM | 名字怎麼取 | 命名規則 |
| OOCSS | 樣式怎麼拆 | 拆解原則 |
| SMACSS | 檔案怎麼分 | 分類架構 |
實務上最常見的組合，是用 SMACSS 分檔案、用 OOCSS 拆樣式、用 BEM 取名字。怎麼挑與怎麼混用請見 方法論怎麼選。
和 CSS Modules 的差別
注意
CSS Modules 是建置工具的功能，不是這裡講的模組化。
它會在打包時把 .title 改寫成 .Card_title__x7f2a 這種不會重複的字串，由工具保證不撞名；本群組談的模組化則是靠人為約定的命名規則達成，純 CSS、沒有任何工具也成立。
兩者目標相近但層次不同，也可以並用。CSS Modules 的實際運作見 Sass 與建置工具。
怎麼開始
不必一次到位，按這個順序推進最不痛：
- 先統一命名。 挑一套規則（多半是 BEM），新寫的元件一律照著來，舊的先不動。
- 再拆共用的部分。 同樣的按鈕、卡片複製第三次時，把共同樣式抽成基底類別。
- 最後才分檔案。 檔案大到找不到東西，再依 SMACSS 的五類拆開。
小提醒
順序反過來做通常會失敗：檔案先分好、命名卻沒共識，只是把混亂分散到更多檔案裡。
常見問題
CSS 模組化和 CSS Modules 是同一件事嗎？
不是。模組化是一種寫樣式的思維，靠類別拆分與命名規則達成，純 CSS 就能做；CSS Modules 是建置工具的功能，會把類別名改寫成不重複的字串。兩者目標接近，手段完全不同。
小專案有必要模組化嗎？
規則可以簡化，但命名的一致性從第一天就該有。一個人寫、兩週會結束的頁面不必套完整方法論；只要同一種元件在專案裡的叫法固定，往後接手的人就讀得懂。
模組化一定要用 Sass 或其他前處理器嗎？
不用。三套方法論規範的都是類別怎麼命名、樣式怎麼切分，純 CSS 完全做得到。前處理器只是讓拆檔與組名字更省事，不是前提。
已經寫亂的專案還救得回來嗎？
可以，但別整包重寫。挑一個常被重複複製的元件，先用新規則寫一份，讓新頁面都改用它，舊樣式維持不動；等新寫法涵蓋的範圍夠大，再回頭刪舊的。
