OOCSS、SMACSS、BEM、CSS Modules、CSS in JS … 這些規範（或稱心法、解法）存在的目的都是為了讓程式碼易懂、可重用，進而有效率地開發和維護。
OOCSS（Object Oriented CSS）
兩個原則
Separation of Structure from Skin：分離結構與樣式。結構像是元素的大小，樣式像是顏色等。
Separation of Containers and Content：分離 HTML 與 CSS，意即盡量將可共用的樣式提取到單獨的 class 以供使用。
白話文解釋就是「使用 class 撰寫樣式，每個 class 有其各自用途」。
例如
<button class="btn btn-small btn-primary"></button>
其中
btn：規範按鈕的預設樣式。
btn-small：規範按鈕的大小，在這裡是指小的。可能還有 btn-large（可能是大的）、btn-medium（可能是中的）。
btn-primary：規範按鈕的顏色，在此「primary」表示暗示使用者作出行動的主色，例如橘色。可能還有 btn-default（可能是白色）、btn-disabled（可能是灰色）。
這樣的規範讓開發者能設計出一套可經由「組合」而產生多種樣式結構，讓程式碼更精簡、便於管理與維護。範例：Bootstrap。
SMACSS
具結構分類、命名規則的限制。
通則
結構分類：Base、Layout、Module、State、Theme。
命名規則：id 與 class 受限制地使用、名稱使用 dash 分隔。
結構
Base：網頁的基本樣式，包含 CSS Reset。
Layout：將網頁切割成不同區塊（元素），區塊若為唯一出現可用 id，例如 #tab；若會重複出現則用 class，其中，class 可串連，例如 .tab-default.tab-fancy。
Module：同 Layout，也是頁面上的區塊，但比較像是區塊的內容，只能使用 class 命名，並且使用 dash 分隔，例如 .tab-item。
State：描述元件的狀態，例如：tab-item active 的 active。
Theme：針對網站主視覺而定義的 Layout 或 Module 的樣式。 例如 .tab-dark。
優點同 OOCSS，缺點是結構的分類存在模糊界線。
BEM
BEM 是一種 CSS class 命名的設計模式，將介面切割成許多獨立的區塊，以區塊（Block）、元素（Element）和修飾子（Modifier）來命名，優點是以元件觀念進行開發，具有重用性。它擁有 OOCSS 的架構清楚的美好，也沒有 SMACSS 複雜或令人混淆的部份。
BEM 表示法可以讓選取器更加嚴謹、更加清晰、所表達的資訊也更豐富。
這個 BEM 表示法的格式大致如下：
.block{}
.block__element{}
.block--modifier{}
其中：
.block 代表某個較為高階或較為抽象的樣式定義
.block__element 代表是套用在 .block 下的一個子元素
.block--modifier 代表 .block 在不同狀態下的樣式
REFERENCE: CSS 的模組化方法：OOCSS、SMACSS、BEM、CSS Modules、CSS in JS、CSS 筆記、建議與指導方針總整理
留言列表
