簡評：Debug CSS 是一種很耗時的操作，如果有良好的命名規范可以節約很多的 Debug 時間。

使用連字符（'-'）分隔字符串

你可能習慣了在 Javascript 中使用小駝峰的命名方式：

var redBox = document.getElementById（'...'）

但是在 CSS 中不建議使用這種命名方式：

.redBox {   border：1px純紅色; }

而應該使用這種：

.red-box {    border：1px純紅色; }

這是一個標準的 CSS 命名規則，有更好的可讀性。

此外，他和 CSS 屬性名稱一致。

//正確.some-class {    font-weight：10em }//錯了.some-class {    fontWeight：10em }

BEM 命名規范

團隊有不同的方法來編寫 CSS 選擇器。一些團隊使用連字符分隔符，而其他團隊則傾向于使用更加結構化的稱為 BEM 的命名規范。

一般來說，CSS 命名規范有三個問題要解決：

1. 能夠通過名字就能清楚選擇器的功能。
2. 能夠看出選擇器在哪里可以使用。
3. 能夠看出 class 之間的關系。

你有沒有見過這樣寫的類名：

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

這就是 BEM 命名規則。

B 代表塊（Block）

BEM 試圖將整個用戶界面分成可重用獨立的塊（Block，注意這里的 Block 并非指 inline-block），一個 header 是一個 block，header 里面嵌套的元素（logo、input、menu）也可以是 block 。

舉個例子下面的圖片：

這是一個火柴人（我們可以把它看做一個 Block），按照之前的說法，這個組件的命名我們可以設為 stick-man 。

主鍵的樣式應該如下所示：

.stick-man {   }

E 代表元素

Block 中一般會有多個元素，舉個例子：火柴人有一個 head，兩個 arms 和 feets

head、feet、和 arms 是該組件中的所有元素。使用 BEM 命名規則，通過雙下劃線連接塊（Block）和元素（Elements）方式來命名。

.stick-man__head {}.stick-man__arms {}.stick-man__feet {}

M 代表修飾符

BEM 中 M 代表修飾，可以對塊（Block）或元素（Element）進行修飾（外觀或行為的調整），我們可以調整我們的火柴人生成藍色火柴人和紅色火柴人（實際上我們可能需要一個藍色按鈕和一個紅色按鈕）。

使用 BEM 的命名規則我們使用雙連接符來命名（'--'）

例如：

.stick-man--blue {}.stick-man--red {}

修飾符也可用于元素（element），例如我們只想調整火柴人的頭部大小。我們可以這樣命名

.stick-man__head--small {}.stick-man__head--big {}

以上就是 BEM 的命名方式，這種命名方式雖然有點