好的 CSS 命名規範能夠節約 Debug 時間

簡評：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 的命名方式，這種命名方式雖然有點囉嗦可是在複雜的工程中能夠很好的理清各部分之間的關係，若是隻是簡單的工程直接使用分隔符命名就好了。

在 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