[譯] CSS使用BEM命名規範的五大理由

前言

BEM命名規範無疑是優秀的，它可以防止你的CSS代碼陷入混亂,難以維護。當我剛接觸到BEM的時候，我一會兒就喜歡上了這種規範，下面我將給你們分享下。

CSS是一門易於書寫並容易理解的語言，但若是要在一個大型的項目中保持你的CSS代碼整潔，易於維護卻不是一件容易的事情，不少人每每把它寫的雜亂無章。不少時候，你須要理解某部分代碼時，你可能須要從頭開始讀起。這種場景是否是似曾類似呢？也許這個時候就須要一套規範讓你們共同遵照了。常見的規範不少，每一個人的選擇可能也不同，而我則選擇使用BEM命名規範

來源: Mat Przegiętka

圖片來源： Mat Przegiętka

BEM是什麼？

BEM是一種CSS類命名規範，經過 模塊化 和 可維護 的方式 編寫樣式。

BEM是 塊（Block），元素（Element），修飾符（Modifier）的縮寫。

例如：'block__element--modifier'

類的命名老是以塊名開始,而後是元素名（可選，前面加兩個下劃線），最後是修飾符（也可選，前面加兩個破折號）。

圖1：在BEM中命名的組件示例

塊(Block)

塊是一個獨立的，可重複使用的模塊 , 你能夠將其視爲前端框架中的組件。例如，一個上圖示例的"card"就是一個很典型的塊。

注意：避免使用特定內容的命名（好比「shopping-list」）,推薦使用通用的名稱（好比「check-list」），以便在不一樣的場景中複用它們（「check-list」和「todo-list」）。

元素(Element)

元素是隻存在於其塊內的子元素。

好比上圖示例中的card__title,card__text 或 card__button。

注意：元素嵌套只能有一個層級，因此card__button__text是不可行的。你應該定義另外一個名爲「button」的塊（由button__text組成）。

修飾符(Modifier)

修飾符能夠爲塊或元素提供額外的描述，如顏色，狀態等。

經過這種方式，咱們能夠有像card__button--primary這樣的card--featured類。

注意：修飾符只能進行修飾，並老是伴隨着基礎塊。對於card，它將是：「card card--featured」，其中基礎塊定義了內邊距和邊框，而修飾符則定義了背景顏色。

圖2：修飾符示例

• 除了BEM三個核心部分，你還能夠給類添加 命名空間 前綴。

想深刻理解可點擊 getbem 和 Naming convention 。此外，還有一些 相關博文。

BEM 有哪些優點

普遍承認

BEM是最受開發者承認的命名規範之一。也就是說，當你爲你的BEM項目引入新的開發成員時，他們頗有可能已經瞭解過這一規範，從而縮短了學習和適應的過程，從而讓他們快速投入開發。

可讀性強

每一個元素都有語義化的類名，這樣CSS樣式表可讀性很是強。選擇器不只閱讀起來更溫馨，也比多層嵌套的寫法運行效率更高。

圖3：語義化的BEM命名 VS 標籤選擇器

擴展性強

CSS選擇器的粒度足夠地細，改動時就變得很是簡單。只須要修改一個選擇器就夠了，也不用擔憂兩個選擇器之間產生的權重問題

圖4：重寫二級菜單圖標的樣式（BEM與嵌套標籤）

適應性強

模塊化複用的理念，讓BEM很容易配合其餘框架一塊兒使用。 此外，樣式與元素類型和嵌套無關，不會打亂文檔結構。

圖5：元素類型和嵌套的重要性（BEM與標籤））

健壯性

計算機科學只有兩件事難以處理：緩存失效和命名。
—— Phil Karlton

當你開始使用BEM時，你可能會發現本身會有許多疑慮。
這反而是一件好事:

1. 使用合適的塊命名讓你的代碼清晰易讀，別人更容易理解（也包括你之後本身理解）

2. 類似的模塊推薦複用已有的類名

3. 避免多級嵌套

簡而言之，它會促使你開始注意細節，思考問題，從而提升代碼的質量。 準備好使用BEM了嗎？

譯者：因爲本人水平有限，翻譯的內容不免有錯漏和理解誤差之處，歡迎各位大神指正

原文：blog.elpassion.com/reasons-to-…