BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團隊提出的一種前端命名方法論。這種巧妙的命名方法讓你的CSS類對其他開發(fā)者來說更加透明而且更有意義。BEM命名約定更加嚴格，而且包含更多的信息，它們用于一個團隊開發(fā)一個耗時的大項目。
重要的是要注意，我使用的基于BEM的命名方式是經(jīng)過Nicolas Gallagher修改過的。這篇文章中介紹的這種命名技術并不是原始的BEM，但卻是一個我更喜歡的改進版。無論實際使用了什么樣的符號，它們其實都是基于同樣的BEM原則。
命名約定的模式如下：
.block{}
.block__element{}
.block--modifier{}
-
.block代表了更高級別的抽象或組件。 -
.block__element代表.block的后代，用于形成一個完整的.block的整體。 -
.block--modifier代表.block的不同狀態(tài)或不同版本。
之所以使用兩個連字符和下劃線而不是一個，是為了讓你自己的塊可以用單個連字符來界定，如：
.site-search{} /* 塊 */
.site-search__field{} /* 元素 */
.site-search--full{} /* 修飾符 */
BEM的關鍵是光憑名字就可以告訴其他開發(fā)者某個標記是用來干什么的。通過瀏覽HTML代碼中的class屬性，你就能夠明白模塊之間是如何關聯(lián)的：有一些僅僅是組件，有一些則是這些組件的子孫或者是元素,還有一些是組件的其他形態(tài)或者是修飾符。我們用一個類比/模型來思考一下下面的這些元素是怎么關聯(lián)的：
.person{}
.person__hand{}
.person--female{}
.person--female__hand{}
.person__hand--left{}
頂級塊是‘person’，它擁有一些元素，如‘hand’。一個人也會有其他形態(tài)，比如女性，這種形態(tài)進而也會擁有它自己的元素。下面我們把他們寫成‘常規(guī)’CSS:
.person{}
.hand{}
.female{}
.female-hand{}
.left-hand{}
這些‘常規(guī)’CSS都是有意義的，但是它們之間卻有些脫節(jié)。就拿.female來說，是指女性人類還是某種雌性的動物？還有.hand，是在說一只鐘表的指針（譯注：英文中hand有指針的意思）？還是一只正在玩紙牌的手？使用BEM我們可以獲得更多的描述和更加清晰的結構，單單通過我們代碼中的命名就能知道元素之間的關聯(lián)。BEM真是強大。
再來看一個之前用‘常規(guī)’方式命名的.site-search的例子：
<form class="site-search full">
<input type="text" class="field">
<input type="Submit" value ="Search" class="button">
</form>
這些CSS類名真是太不精確了，并不能告訴我們足夠的信息。盡管我們可以用它們來完成工作，但它們確實非常含糊不清。用BEM記號法就會是下面這個樣子：
<form class="site-search site-search--full">
<input type="text" class="site-search__field">
<input type="Submit" value ="Search" class="site-search__button">
</form>
我們能清晰地看到有個叫.site-search的塊，他內(nèi)部是一個叫.site-search__field的元素。并且.site-search還有另外一種形態(tài)叫.site-search--full。
我們再來舉個例子……
如果你熟悉OOCSS（面向對象CSS），那么你對media對象一定也不陌生。用BEM的方式，media對象就會是下面這個樣子：
.media{}
.media__img{}
.media__img--rev{}
.media__body{}
從這種CSS的寫法上我們就已經(jīng)知道.media__img 和.media__body一定是位于.media內(nèi)部的，而且.media__img--rev是.media__img的另一種形態(tài)。僅僅通過CSS選擇器的名字我們就能獲取到以上全部信息。
BEM的另外一個好處是針對下面這種情況：
<div class="media">
<img src="logo.png" alt="Foo Corp logo" class="img-rev">
<div class="body">
<h3 class="alpha">Welcome to Foo Corp</h3>
<p class="lede">Foo Corp is the best, seriously!</p>
</div>
</div>
光從上面的代碼來看，我們根本不明白.media和.alpha兩個class彼此之間是如何相互關聯(lián)的？同樣我們也無從知曉.body和.lede之間，或者.img-rev和.media之間各是什么關系？從這段HTML（除非你對那個media對象非常了解）中我們也不知道這個組件是由什么組成的和它還有什么其他的形態(tài)。如果我們用BEM方式重寫這段代碼：
<div class="media">
<img src="logo.png" alt="Foo Corp logo" class="media__img--rev">
<div class="media__body">
<h3 class="alpha">Welcome to Foo Corp</h3>
<p class="lede">Foo Corp is the best, seriously!</p>
</div>
</div>
我們立馬就能明白.media是一個塊，.media__img--rev是一個加了修飾符的.media__img的變體，它是屬于.media的元素。而.media__body是一個尚未被改變過的也是屬于.media的元素。所有以上這些信息都通過它們的class名稱就能明白，由此看來BEM確實非常實用。
丑極了！
通常人們會認為BEM這種寫法難看。我敢說，如果你僅僅是因為這種代碼看上去不怎么好看而羞于使用它，那么你將錯失最重要的東西。除非使用BEM讓代碼增加了不必要的維護困難，或者這么做確實讓代碼更難讀了，那么你在使用它之前就要三思而行了。但是，如果只是“看起來有點怪”而事實上是一種有效的手段，那么我們在開發(fā)之前當然應該充分考慮它。
是，BEM看上去確實怪怪的，但是它的好處遠遠超過它外觀上的那點瑕疵。
BEM可能看上去有點滑稽，而且有可能導致我們輸入更長的文本（大部分編輯器都有自動補全功能，而且gzip壓縮將會讓我們消除對文件體積的擔憂），但是它依舊強大。
用還是不用BEM?
我在我的所有項目中都使用了BEM記號法，因為它的有效性已經(jīng)被它自己一次又一次地證明。我也極力地建議別人使用BEM，因為它讓所有東西之間的聯(lián)系變得更加緊密，讓團隊甚至是你個人都能夠更加容易地維護代碼。
然而，當你真正使用BEM的時候，重要的是，請記住你沒必要真的在每個地方都用上它。比如：
.caps{ text-transform:uppercase; }
這條CSS不屬于任何一個BEM范疇，它僅僅只是一條單獨的樣式。
另一個沒有使用BEM的例子是：
.site-logo{}
這是一個logo，我們可以把它寫成BEM格式，像下面這樣：
.header{}
.header__logo{}
但我們沒必要這么做。使用BEM的訣竅是，你要知道什么時候哪些東西是應該寫成BEM格式的。因為某些東西確實是位于一個塊的內(nèi)部，但這并不意味它就是BEM中所說的元素。這個例子中，網(wǎng)站logo完全是恰巧在.header的內(nèi)部，它也有可能在側邊欄或是頁腳里面。一個元素的范圍可能開始于任何上下文，因此你要確定只在你需要用到BEM的地方你才使用它。再看一個例子：
<div class="content">
<h1 class="content__headline">Lorem ipsum dolor...</h1>
</div>
在這個例子里，我們也許僅僅只需要另一個class，可以叫它.headline；它的樣式取決于它是如何被層疊的，因為它在.content的內(nèi)部；或者它只是恰巧在.content的內(nèi)部。如果它是后者（即恰巧在.content的內(nèi)部，而不總是在）我們就不需要使用BEM。
然而，一切都有可能潛在地用到BEM。我們再來看一下.site-logo的例子，想象一下我們想要給網(wǎng)站增加一點圣誕節(jié)的氣氛，所以我們想有一個圣誕版的logo。于是我們有了下面的代碼：
.site-logo{}
.site-logo--xmas{}
我們可以通過使用--修飾符來快速地為我們的代碼構建另一個版本。
BEM最難的部分之一是明確作用域是從哪開始和到哪結束的，以及什么時候使用（不使用）它。隨著接觸的多了，有了經(jīng)驗積累，你慢慢就會知道怎么用，這些問題也不再是問題。
結束語
所以，BEM（或BEM的變體）是一個非常有用，強大，簡單的命名約定，以至于讓你的前端代碼更容易閱讀和理解，更容易協(xié)作，更容易控制，更加健壯和明確而且更加嚴密。
盡管BEM看上去多少有點奇怪，但是無論什么項目，它對前端開發(fā)者都是一個巨有價值的工具。
