參考文獻：http://www.ibm.com/developerworks/cn/web/1512_chengfu_bem/
http://www.oschina.net/translate/thoughtful-css-architecture

BEM的本質是一個css類名命名方案。由于CSS沒有作用域的概念，也不像SCSS那樣可以寫出層級關系，所以，如果有兩個類名，比如.nav和li，雖然你知道li在.nav中，你也可以寫出.nav li {}這樣的選擇器，但是很多情況下我們還是希望給li專門設一個類名，這時候BEM就是一個好的方案。

BEM規范詳解

所謂BEM，其實是三個單詞的縮寫：Block（模塊）、Element（元素）、Modifier（修飾符）。

1.Block（模塊）

一個模塊是一個獨立的實體部分，就像應用的一塊“積木”。一個模塊既可以是簡單的也可以是復合的（包含其他模塊）。

命名規范：

模塊名稱可以由拉丁字母，數字和短劃線組成。 如：.block、.form

比如搜索框和按鈕組成的組件就是一個模塊。

我認為的命名的最佳實踐是：.xxoo，也就是用兩個詞組成的詞組來描述這個塊，比如.propertyeditor或.languageswitcher，前者意思是屬性編輯器，后者是語言切換器。強行用一個詞來描述的話，你會發現詞根本不夠用。

B和M可以直接連用，跳過E，這是允許的。

2.Element（元素）

一個元素是塊的一部分，具有某種功能。元素是依賴上下文的：它們只有處于他們應該屬于的塊的上下文中時才是有意義的。

比如，.form的input元素和button元素都是元素。

命名規范：

元素名稱可以包含拉丁字母，數字，破折號和下劃線。 CSS類名寫成塊名稱加破折號加上元素名稱：.block-elem，其中elem可以是直接元素標簽名，也是表義的名稱。

我認為的最佳實踐是：比如對話框內有一個確定按鈕，這個確定按鈕的類名可以是：.alert-modal__button--done，其中done是修飾符，表示是“表確定的那個按鈕”。修飾符在下面講。

3.Modifier（修飾符）

修飾符是塊或元素上的標志。這些標志用來形容元素或塊的外觀、行為或狀態。例如button、a標簽上的active狀態。

命名規范：

修飾符名稱可以包含拉丁字母，數字，破折號和下劃線。 CSS類名寫成模塊或元素的名稱加上兩個破折號：.block--mod或.block__elem--mod和.block--color-black。

示例：

.form__submit--disabled

我認為的最佳實踐是：比如對話框內有一個確定按鈕，這個確定按鈕的類名可以是：.alertmodal__button--done，其中done是修飾符，表示是“表確定的那個按鈕”。

小結：

從上面的實例中，我們不難發現BEM有以下特點：

• 復雜的類名極大減少了類名重復的可能性。
• 每個塊里的一類元素的樣式對應一個類名。如此，一類元素對應一個類名，減少了子選擇器或后代選擇器的使用，提升了css的性能。
• css類名的命名更加語義化，更容易讀懂。
• 可復用性高，例如我們可以把主題類名.form__theme--xmas替換，即可對應替換為別的主題樣式。

靈活運用：

BEM的精華是B、E、M，中間用幾個連接符都是小事，一般單個中劃線就可以了，但是，最常見的連接符是bb__ee--mm的形式，盡量遵守這種形式，當你遇到其他人寫的規范的css文檔的時候，可以降低閱讀難度。