前言
BEM命名規範無疑是優秀的，它能夠防止你的CSS程式碼陷入混亂,難以維護。當我剛接觸到BEM的時候，我一下子就喜歡上了這種規範，下面我將給大家分享下。
CSS是一門易於書寫並容易理解的語言，但如果要在一個大型的專案中保持你的CSS程式碼整潔，易於維護卻不是一件容易的事情，很多人往往把它寫的雜亂無章。很多時候，你需要理解某部分程式碼時，你可能需要從頭開始讀起。這種場景是不是似曾相似呢？也許這個時候就需要一套規範讓大家共同遵守了。常見的規範很多，每個人的選擇可能也不一樣，而我則選擇使用BEM命名規範
圖片來源： Mat Przegiętka
BEM是什麼？
BEM是一種CSS類命名規範，通過 模組化 和 可維護 的方式 編寫樣式。
BEM是 塊（Block），元素（Element），修飾符（Modifier）的縮寫。
例如：'block__element--modifier'
類的命名總是以塊名開始,然後是元素名（可選，前面加兩個下劃線），最後是修飾符（也可選，前面加兩個破折號）。
塊(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”，其中基礎塊定義了內邊距和邊框，而修飾符則定義了背景顏色。
- 除了BEM三個核心部分，你還可以給類新增 名稱空間 字首。
想深入理解可點選 getbem 和 Naming convention 。此外，還有一些 相關博文。
BEM 有哪些優勢
廣泛認可
BEM是最受開發者認可的命名規範之一。也就是說，當你為你的BEM專案引入新的開發成員時，他們很有可能已經瞭解過這一規範，從而縮短了學習和適應的過程，從而讓他們快速投入開發。
可讀性強
每個元素都有語義化的類名，這樣CSS樣式表可讀性非常強。選擇器不僅閱讀起來更舒適，也比多層巢狀的寫法執行效率更高。
擴充套件性強
CSS選擇器的粒度足夠地細，改動時就變得非常簡單。只需要修改一個選擇器就夠了，也不用擔心兩個選擇器之間產生的權重問題
適應性強
模組化複用的理念，讓BEM很容易配合其他框架一起使用。 此外，樣式與元素型別和巢狀無關，不會打亂文件結構。
健壯性
電腦科學只有兩件事難以處理：快取失效和命名。
—— Phil Karlton
當你開始使用BEM時，你可能會發現自己會有許多疑慮。
這反而是一件好事:
使用合適的塊命名讓你的程式碼清晰易讀，別人更容易理解（也包括你以後自己理解）
相似的模組推薦複用已有的類名
避免多級巢狀
簡而言之，它會促使你開始注意細節，思考問題，從而提高程式碼的質量。 準備好使用BEM了嗎？
譯者：由於本人水平有限，翻譯的內容難免有錯漏和理解偏差之處，歡迎各位大神指正