簡評：Debug CSS 是一種很耗時的操作译柏，如果有良好的命名規(guī)范可以節(jié)約很多的 Debug 時間。
使用連字符（'-'）分隔字符串
你可能習慣了在 Javascript 中使用小駝峰的命名方式：
var redBox = document.getElementById（'...'）
但是在 CSS 中不建議使用這種命名方式：
.redBox {
border：1px純紅色;
}
而應該使用這種：
.red-box {
border：1px純紅色;
}
這是一個標準的 CSS 命名規(guī)則姐霍，有更好的可讀性鄙麦。
此外，他和 CSS 屬性名稱一致镊折。
//正確
.some-class {
font-weight：10em
}
//錯了
.some-class {
fontWeight：10em
}
BEM 命名規(guī)范
團隊有不同的方法來編寫 CSS 選擇器胯府。一些團隊使用連字符分隔符，而其他團隊則傾向于使用更加結構化的稱為 BEM 的命名規(guī)范恨胚。
一般來說盟劫，CSS 命名規(guī)范有三個問題要解決：
- 能夠通過名字就能清楚選擇器的功能。
- 能夠看出選擇器在哪里可以使用与纽。
- 能夠看出 class 之間的關系侣签。
你有沒有見過這樣寫的類名：
.nav--secondary {
...
}
.nav__header {
...
}
這就是 BEM 命名規(guī)則。
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 命名規(guī)則栈幸，通過雙下劃線連接塊（Block）和元素（Elements）方式來命名。
.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}
M 代表修飾符
BEM 中 M 代表修飾帮辟，可以對塊（Block）或元素（Element）進行修飾（外觀或行為的調整）速址，我們可以調整我們的火柴人生成藍色火柴人和紅色火柴人（實際上我們可能需要一個藍色按鈕和一個紅色按鈕）。
使用 BEM 的命名規(guī)則我們使用雙連接符來命名（'--'）
例如：
.stick-man--blue {
}
.stick-man--red {
}
修飾符也可用于元素（element）由驹，例如我們只想調整火柴人的頭部大小芍锚。我們可以這樣命名
.stick-man__head--small {
}
.stick-man__head--big {
}
以上就是 BEM 的命名方式，這種命名方式雖然有點啰嗦但是在復雜的工程中可以很好的理清各部分之間的關系蔓榄，如果只是簡單的工程直接使用分隔符命名就行了并炮。
在 JavaScript 中用到的 CSS 類名應該如何命名
當你看到這個篇文章開始著手重構自己的項目。
你將原來的代碼：
<div class="siteNavigation">
</div>
改成了：
<div class="site-navigation">
</div>
這看著很棒润樱，但是你忘了你在某個地方（JavaScript）用到了這個類名：
//the Javasript code
const nav = document.querySelector('.siteNavigation')
這個時候 nav 將會得到 null。
為了防止這種情況羡棵，我們可以使用如下的命名來提醒我們壹若。
使用 'js-*' 來命名
我們可以使用 **js- **來命名我們的類:
<div class="site-navigation js-site-navigation">
</div>
在 JavaScript 代碼我們使用 js-site-navigation 來獲取該 DOM：
//the Javasript code
const nav = document.querySelector('.js-site-navigation')
現在我們只要一看到 js-site-navigation 就會想到，在某個 JavaScript 代碼中使用該類名獲取 DOM 對象皂冰。
英文原文： CSS Naming Conventions that Will Save You Hours of Debugging
舊文推薦：圖片加載時使用 SVG 作為圖片 placehold
