css命名規範： BEM 的命名法

 

整理自：前端早讀課【第1183期】這些 CSS 命名規範，將省下你大把調試時間

試圖解決 3 類問題：

僅從名字就能知道一個 CSS 選擇器具體作什麼

從名字能大體清楚一個選擇器能夠在哪裏使用

從 CSS 類的名稱能夠看出它們之間的聯繫

不知你是否見過這樣的類名：

.nav--secondary {
...
}
.nav__header {
...
}

 

這就是 BEM 命名規範。

這個火柴人表明了一個組件，好比說一個設計區塊。

BEM 這裏的 B 意爲『區塊』（'Block'）。

在實際中，這裏『區塊』能夠表示一個網站導航、頁眉、頁腳或者其餘一些設計區塊。

根據上述解釋，那麼這個組件的理想類名稱便是 stick-man。

組件的樣式應寫成這樣：

.stick-man {
}