[譯] 這些 CSS 命名規範將省下你大把調試時間

• 原文地址：CSS Naming Conventions that Will Save You Hours of Debugging
• 原文做者：Ohans Emmanuel
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：unicar
• 校對者：dazhi1011，swants

這些 CSS 命名規範將省下你大把調試時間

我據說不少開發者厭惡 CSS。而在個人經驗中，這每每是因爲他們並無花時間來學習 CSS。

CSS 算不上是最優美的『語言』，但迄今二十多年來，它都是美化 web 舉足輕重的工具。從這點來講，也還算不錯吧？

儘管如此，CSS 寫得越多，你越容易發現一個巨大的弊端。

由於維護 CSS 真是老大難。

特別是那些寫得差勁的 CSS 會很快變成程序員的噩夢。

這裏向你們介紹一些命名規範，遵守這些規範能夠省時省力，少走彎路。

對此你必定深有體會吧？

使用連字符分隔的字符串

若是你常寫 JavaScript，那麼你知道對變量使用駝峯式命名法（camel case）是一種慣例。

var redBox = document.getElementById('...')
複製代碼

這樣很好，對吧？

但問題是這種命名法並不適用於 CSS。

請切忌以以下方式命名：

.redBox {
  border: 1px solid red;
}
複製代碼

相應的，你能夠這樣寫：

.red-box {
   border: 1px solid red;
}
複製代碼

這是一種很是標準的 CSS 命名規範。也能夠說更易讀。

同時，這也和 CSS 屬性名稱保持了一致。

// Correct
.some-class {
   font-weight: 10em
}
// Wrong
.some-class {
   fontWeight: 10em
}
複製代碼

BEM 命名規範

不同的團隊在寫 CSS 選擇器（CSS selectors）有不同的方法。有些團隊使用的是連字符分隔（hyphen delimiters）法，還有一些傾向於使用一種叫 BEM 的命名法，這種方法更加有條理。

總的來講，這些 CSS 命名規範試圖解決 3 類問題：

1. 僅從名字就能知道一個 CSS 選擇器具體作什麼
2. 從名字能大體清楚一個選擇器能夠在哪裏使用
3. 從 CSS 類的名稱能夠看出它們之間的聯繫

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

.nav--secondary {
  ...
}
.nav__header {
  ...
}
複製代碼

這就是 BEM 命名規範。

向 5 歲小孩解釋 BEM 規範

BEM 規範試圖將整個用戶界面分解成一個個小的可重複使用的組件。

讓咱們來看看下圖：

這但是個足以得獎的火柴人呢 :)

哎，惋惜並非 :(

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

或許你已經猜到了 BEM 這裏的 B 意爲『區塊』（‘Block’）。

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

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

組件的樣式應寫成這樣：

.stick-man {
  
 }
複製代碼

在這裏咱們使用了連字符分隔法，很好！

E 表明元素（Elements）

BEM 中的 E 表明着元素。

總體的區塊設計每每並非孤立的。

比方說，這個火柴人有一個頭部（head），兩隻漂亮的手臂（arms）和雙腳（feet）。

The head , feet, and arms are all elements within the component. They may be seen as child components, i.e. children of the overall parent component. 這些 head、 feet 和 arms 都是組件中的元素。它們可視做子組件（child components），也就是父組件的組成部分。 若是使用 BEM 命名規範的話，這些元素的類名均可以經過在兩條下劃線後加上元素名稱來產生。

好比說：

.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}
複製代碼

M 表明修飾符（Modifiers）

M 在 BEM 命名法中表明修飾符。

若是說這個火柴人有個 blue 或者 red 這樣的修飾符怎麼辦呢？

在現實場景裏，這多是一個 red 或者 blue 的按鈕。這就是以前在講的組件當中的限定修飾。

若是使用 BEM 的話，這些修飾符的類名均可以經過在兩條連字符後加上元素名來產生。

好比說：

.stick-man--blue {
}
.stick-man--red {
}
複製代碼

最後這個例子展現的是父組件加修飾符。不過這種狀況並不常常出現。

假如咱們這個火柴人擁有另外一個不同的頭部大小呢？

這一次元素被加上了修飾符。記住，元素指一個總體封裝區塊中的一個子組件。

.stick-man 表示區塊（Block）， .stick-man__head 表示元素（the element）。

從上例能夠看出，雙連字符也能夠這樣使用：

.stick-man__head--small {
}
.stick-man__head--big {
}
複製代碼

重申一次，上例中使用的雙連字符是用來指代修飾符的。

這樣你都明白了吧。

這就是 BEM 的基本用法。

我的來講，我在小項目中通常只用連字符分割法來寫類名，在用戶界面更復雜的項目中使用 BEM 方法。

關於 BEM，從這裏瞭解更多

BEM - Block Element Modifier: _BEM - Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the…_getbem.com

爲什麼要使用命名規範？

在計算機科學當中只有兩類難題：緩存失效和命名 - Phil Karlton

命名的確很難。因此咱們要儘可能把它變得容易點，也爲之後維護代碼省點時間。

能正確命名 CSS 中的類名可讓你的代碼變得更易理解和維護。

若是你選擇 BEM 命名規範，在看標記語言（markup）時就更容易看清各個設計組件/區塊之間的關係。

感受不錯吧？

和 JavaScript 關聯的 CSS 名稱

今天是 John 上班第一天。

他拿到了以下一段 HTML 代碼：

<div class="siteNavigation">
</div>
複製代碼

由於恰好讀了這篇文章，John 意識到這種命名方法在 CSS 中不是最好的方法。因而他將代碼修改爲下面這樣：

<div class="site-navigation">
</div>
複製代碼

看上去不錯吧？

不過 John 沒想到的是，他把整個代碼庫搞砸了 😩😩😩

爲何會這樣？

在 JavaScript 代碼中，有一段是和以前的類名 siteNavigation 有關聯的：

// Javascript 代碼
const nav = document.querySelector('.siteNavigation')
複製代碼

因爲類名的改變，nav 變量如今變成了 null。

好憂桑。😔😔

爲了防止這種狀況發生，開發者們想了不少不一樣的策略。

1. 使用 js- 類名

一種減小這類 bug 的方法是使用 js- 的類名命名方法。用這種方法來代表這個 DOM 元素和 JavaScript 代碼的關聯。

例如：

<div class="site-navigation js-site-navigation">
</div>
複製代碼

一樣的在 JavaScript 代碼中：

//the Javasript code
const nav = document.querySelector('.js-site-navigation')
複製代碼

依照命名規範，任何人看到 js-site-navigation 這個類名稱，就會知道 JavaScript 代碼中有一段和這個 DOM 元素有關聯的代碼。

2. 使用 Rel 屬性

我本身沒用過這種方法，不過我看到其餘人用過。

你是否熟悉這樣的代碼？

<link rel="stylesheet" type="text/css" href="main.css">
複製代碼

通常來講，rel 屬性 定義着連接資源和引用它的文件之間的關係。

回頭看 John 的例子，這種方法建議咱們寫成以下的形式：

<div class="site-navigation" rel="js-site-navigation">
</div>
複製代碼

同時在 JavaScript 中：

const nav = document.querySelector("[rel='js-site-navigation']")
複製代碼

我對這種方法持保留態度。不過你極可能在某些代碼庫中看到它們。這種方法就好像在說：「好吧，這裏和 Javascript 有個關聯，那麼我就用 rel 屬性來表示這種關聯。」

互聯網這個地方，解決同一個問題經常有無數種『方法』。

3. 別用數據屬性（data attributes）

有些開發者用數據屬性（data attributes）做爲 JavaScript 鉤子。這是不對的。根據定義，data 屬性（data attributes）是用來 儲存自定義數據（to store custom data） 的。

這裏數據屬性（data attributes）用得很妙。正如這條 Twitter 上所說的。

附加提議：寫更多的 CSS 註釋

這跟命名規範毫無關係，但也能幫你節省時間。

儘管不少 web 開發者儘可能不寫 Javascript 評論或者只針對某些狀況才寫，但我認爲你應該寫更多的 CSS 註釋。

這是由於 CSS 不是最簡潔優雅的『語言』，有條理的註釋可讓你花更少時間來理解本身的代碼。

有益無弊，何樂不爲。

你能夠看看 Bootstrap 的註釋寫得有多好。source code

你倒不須要寫一個 color: red 的註釋告訴本身這是把顏色定爲紅色。但若是你用了一個不太簡單明瞭的 CSS 小技巧，這時候大能夠寫寫註釋說明一下。

準備好成爲 CSS 大牛了麼？

我建立了一本可讓你 CSS 技能飆升的指南。這裏領取免費電子書

你不知道的七種 CSS 祕籍。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。