參考文獻(xiàn)：http://www.ibm.com/developerworks/cn/web/1512_chengfu_bem/
http://www.oschina.net/translate/thoughtful-css-architecture
BEM的本質(zhì)是一個(gè)css類名命名方案。由于CSS沒有作用域的概念，也不像SCSS那樣可以寫出層級(jí)關(guān)系，所以，如果有兩個(gè)類名，比如.nav和li，雖然你知道li在.nav中，你也可以寫出.nav li {}這樣的選擇器，但是很多情況下我們還是希望給li專門設(shè)一個(gè)類名，這時(shí)候BEM就是一個(gè)好的方案。
BEM規(guī)范詳解
所謂BEM，其實(shí)是三個(gè)單詞的縮寫：Block（模塊）、Element（元素）、Modifier（修飾符）。
1.Block（模塊）
一個(gè)模塊是一個(gè)獨(dú)立的實(shí)體部分，就像應(yīng)用的一塊“積木”。一個(gè)模塊既可以是簡單的也可以是復(fù)合的（包含其他模塊）。
命名規(guī)范：
模塊名稱可以由拉丁字母，數(shù)字和短劃線組成。 如：.block、.form
比如搜索框和按鈕組成的組件就是一個(gè)模塊。
我認(rèn)為的命名的最佳實(shí)踐是：.xxoo，也就是用兩個(gè)詞組成的詞組來描述這個(gè)塊，比如.propertyeditor或.languageswitcher，前者意思是屬性編輯器，后者是語言切換器。強(qiáng)行用一個(gè)詞來描述的話，你會(huì)發(fā)現(xiàn)詞根本不夠用。
B和M可以直接連用，跳過E，這是允許的。
2.Element（元素）
一個(gè)元素是塊的一部分，具有某種功能。元素是依賴上下文的：它們只有處于他們應(yīng)該屬于的塊的上下文中時(shí)才是有意義的。
比如，.form的input元素和button元素都是元素。
命名規(guī)范：
元素名稱可以包含拉丁字母，數(shù)字，破折號(hào)和下劃線。 CSS類名寫成塊名稱加破折號(hào)加上元素名稱：.block-elem，其中elem可以是直接元素標(biāo)簽名，也是表義的名稱。
我認(rèn)為的最佳實(shí)踐是：比如對(duì)話框內(nèi)有一個(gè)確定按鈕，這個(gè)確定按鈕的類名可以是：.alert-modal__button--done，其中done是修飾符，表示是“表確定的那個(gè)按鈕”。修飾符在下面講。
3.Modifier（修飾符）
修飾符是塊或元素上的標(biāo)志。這些標(biāo)志用來形容元素或塊的外觀、行為或狀態(tài)。例如button、a標(biāo)簽上的active狀態(tài)。
命名規(guī)范：
修飾符名稱可以包含拉丁字母，數(shù)字，破折號(hào)和下劃線。 CSS類名寫成模塊或元素的名稱加上兩個(gè)破折號(hào)：.block--mod或.block__elem--mod和.block--color-black。
示例：
.form__submit--disabled
我認(rèn)為的最佳實(shí)踐是：比如對(duì)話框內(nèi)有一個(gè)確定按鈕，這個(gè)確定按鈕的類名可以是：.alertmodal__button--done，其中done是修飾符，表示是“表確定的那個(gè)按鈕”。
小結(jié)：
從上面的實(shí)例中，我們不難發(fā)現(xiàn)BEM有以下特點(diǎn)：
- 復(fù)雜的類名極大減少了類名重復(fù)的可能性。
- 每個(gè)塊里的一類元素的樣式對(duì)應(yīng)一個(gè)類名。如此，一類元素對(duì)應(yīng)一個(gè)類名，減少了子選擇器或后代選擇器的使用，提升了css的性能。
- css類名的命名更加語義化，更容易讀懂。
- 可復(fù)用性高，例如我們可以把主題類名.form__theme--xmas替換，即可對(duì)應(yīng)替換為別的主題樣式。
靈活運(yùn)用：
BEM的精華是B、E、M，中間用幾個(gè)連接符都是小事，一般單個(gè)中劃線就可以了，但是，最常見的連接符是bb__ee--mm的形式，盡量遵守這種形式，當(dāng)你遇到其他人寫的規(guī)范的css文檔的時(shí)候，可以降低閱讀難度。
