參考文獻(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沒(méi)有作用域的概念椅您，也不像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è)模塊既可以是簡(jiǎn)單的也可以是復(fù)合的（包含其他模塊）。
命名規(guī)范：
模塊名稱可以由拉丁字母蛋褥，數(shù)字和短劃線組成临燃。 如：.block、.form
比如搜索框和按鈕組成的組件就是一個(gè)模塊烙心。
我認(rèn)為的命名的最佳實(shí)踐是：.xxoo膜廊，也就是用兩個(gè)詞組成的詞組來(lái)描述這個(gè)塊，比如.propertyeditor或.languageswitcher淫茵，前者意思是屬性編輯器爪瓜，后者是語(yǔ)言切換器。強(qiáng)行用一個(gè)詞來(lái)描述的話匙瘪，你會(huì)發(fā)現(xiàn)詞根本不夠用铆铆。
B和M可以直接連用，跳過(guò)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)志用來(lái)形容元素或塊的外觀瞎抛、行為或狀態(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類名的命名更加語(yǔ)義化坪它，更容易讀懂。
- 可復(fù)用性高帝牡，例如我們可以把主題類名.form__theme--xmas替換往毡，即可對(duì)應(yīng)替換為別的主題樣式。
靈活運(yùn)用：
BEM的精華是B否灾、E卖擅、M，中間用幾個(gè)連接符都是小事墨技，一般單個(gè)中劃線就可以了，但是挎狸，最常見(jiàn)的連接符是bb__ee--mm的形式扣汪，盡量遵守這種形式，當(dāng)你遇到其他人寫的規(guī)范的css文檔的時(shí)候锨匆，可以降低閱讀難度崭别。
