摘要：人們問(wèn)我最多的問(wèn)題之一是在類名中和是什么意思它們的出現(xiàn)是源于和的意思就是塊元素修飾符是由團(tuán)隊(duì)提出的一種前端命名方法論。這種巧妙的命名方法讓你的類對(duì)其他開(kāi)發(fā)者來(lái)說(shuō)更加透明而且更有意義。重要的是要注意，我使用的基于的命名方式是經(jīng)過(guò)修改過(guò)的。

人們問(wèn)我最多的問(wèn)題之一是在CSS類名中--和__是什么意思？它們的出現(xiàn)是源于BEM和Nicolas Gallagher...

BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團(tuán)隊(duì)提出的一種前端命名方法論。這種巧妙的命名方法讓你的CSS類對(duì)其他開(kāi)發(fā)者來(lái)說(shuō)更加透明而且更有意義。BEM命名約定更加嚴(yán)格，而且包含更多的信息，它們用于一個(gè)團(tuán)隊(duì)開(kāi)發(fā)一個(gè)耗時(shí)的大項(xiàng)目。

重要的是要注意，我使用的基于BEM的命名方式是經(jīng)過(guò)Nicolas Gallagher修改過(guò)的。這篇文章中介紹的這種命名技術(shù)并不是原始的BEM，但卻是一個(gè)我更喜歡的改進(jìn)版。無(wú)論實(shí)際使用了什么樣的符號(hào)，它們其實(shí)都是基于同樣的BEM原則。

命名約定的模式如下：

.block{}
.block__element{}
.block--modifier{}

.block 代表了更高級(jí)別的抽象或組件。

.block__element 代表.block的后代，用于形成一個(gè)完整的.block的整體。

.block--modifier代表.block的不同狀態(tài)或不同版本。

之所以使用兩個(gè)連字符和下劃線而不是一個(gè)，是為了讓你自己的塊可以用單個(gè)連字符來(lái)界定，如：

.site-search{} /* 塊 */
.site-search__field{} /* 元素 */
.site-search--full{} /* 修飾符 */

BEM的關(guān)鍵是光憑名字就可以告訴其他開(kāi)發(fā)者某個(gè)標(biāo)記是用來(lái)干什么的。通過(guò)瀏覽HTML代碼中的class屬性，你就能夠明白模塊之間是如何關(guān)聯(lián)的：有一些僅僅是組件，有一些則是這些組件的子孫或者是元素,還有一些是組件的其他形態(tài)或者是修飾符。我們用一個(gè)類比/模型來(lái)思考一下下面的這些元素是怎么關(guān)聯(lián)的：

.person{}
.person__hand{}
.person--female{}
.person--female__hand{}
.person__hand--left{}

頂級(jí)塊是‘person’，它擁有一些元素，如‘hand’。一個(gè)人也會(huì)有其他形態(tài)，比如女性，這種形態(tài)進(jìn)而也會(huì)擁有它自己的元素。下面我們把他們寫成‘常規(guī)’CSS:

.person{}
.hand{}
.female{}
.female-hand{}
.left-hand{}    

這些‘常規(guī)’CSS都是有意義的，但是它們之間卻有些脫節(jié)。就拿.female來(lái)說(shuō)，是指女性人類還是某種雌性的動(dòng)物？還有.hand，是在說(shuō)一只鐘表的指針（譯注：英文中hand有指針的意思）？還是一只正在玩紙牌的手？使用BEM我們可以獲得更多的描述和更加清晰的結(jié)構(gòu)，單單通過(guò)我們代碼中的命名就能知道元素之間的關(guān)聯(lián)。BEM真是強(qiáng)大。

再來(lái)看一個(gè)之前用‘常規(guī)’方式命名的.site-search的例子：

這些CSS類名真是太不精確了，并不能告訴我們足夠的信息。盡管我們可以用它們來(lái)完成工作，但它們確實(shí)非常含糊不清。用BEM記號(hào)法就會(huì)是下面這個(gè)樣子：

我們能清晰地看到有個(gè)叫.site-search的塊，他內(nèi)部是一個(gè)叫.site-search__field的元素。并且.site-search還有另外一種形態(tài)叫.site-search--full。

我們?cè)賮?lái)舉個(gè)例子……

如果你熟悉OOCSS（面向?qū)ο驝SS），那么你對(duì)media對(duì)象一定也不陌生。用BEM的方式，media對(duì)象就會(huì)是下面這個(gè)樣子：

.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)。僅僅通過(guò)CSS選擇器的名字我們就能獲取到以上全部信息。

BEM的另外一個(gè)好處是針對(duì)下面這種情況：

  
  

    
Welcome to Foo Corp
    
Foo Corp is the best, seriously!
  
    

光從上面的代碼來(lái)看，我們根本不明白.media和.alpha兩個(gè)class彼此之間是如何相互關(guān)聯(lián)的？同樣我們也無(wú)從知曉.body和.lede之間，或者.img-rev
和.media之間各是什么關(guān)系？從這段HTML（除非你對(duì)那個(gè)media對(duì)象非常了解）中我們也不知道這個(gè)組件是由什么組成的和它還有什么其他的形態(tài)。如果我們用BEM方式重寫這段代碼：

  
  

    
Welcome to Foo Corp
    
Foo Corp is the best, seriously!
  
    

我們立馬就能明白.media是一個(gè)塊，.media__img--rev是一個(gè)加了修飾符的.media__img的變體，它是屬于.media的元素。而.media__body是一個(gè)尚未被改變過(guò)的也是屬于.media的元素。所有以上這些信息都通過(guò)它們的class名稱就能明白，由此看來(lái)BEM確實(shí)非常實(shí)用。

通常人們會(huì)認(rèn)為BEM這種寫法難看。我敢說(shuō)，如果你僅僅是因?yàn)檫@種代碼看上去不怎么好看而羞于使用它，那么你將錯(cuò)失最重要的東西。除非使用BEM讓代碼增加了不必要的維護(hù)困難，或者這么做確實(shí)讓代碼更難讀了，那么你在使用它之前就要三思而行了。但是，如果只是“看起來(lái)有點(diǎn)怪”而事實(shí)上是一種有效的手段，那么我們?cè)陂_(kāi)發(fā)之前當(dāng)然應(yīng)該充分考慮它。

是，BEM看上去確實(shí)怪怪的，但是它的好處遠(yuǎn)遠(yuǎn)超過(guò)它外觀上的那點(diǎn)瑕疵。

BEM可能看上去有點(diǎn)滑稽，而且有可能導(dǎo)致我們輸入更長(zhǎng)的文本（大部分編輯器都有自動(dòng)補(bǔ)全功能，而且gzip壓縮將會(huì)讓我們消除對(duì)文件體積的擔(dān)憂），但是它依舊強(qiáng)大。

我在我的所有項(xiàng)目中都使用了BEM記號(hào)法，因?yàn)樗挠行砸呀?jīng)被它自己一次又一次地證明。我也極力地建議別人使用BEM，因?yàn)樗屗袞|西之間的聯(lián)系變得更加緊密，讓團(tuán)隊(duì)甚至是你個(gè)人都能夠更加容易地維護(hù)代碼。

然而，當(dāng)你真正使用BEM的時(shí)候，重要的是，請(qǐng)記住你沒(méi)必要真的在每個(gè)地方都用上它。比如：

.caps{ text-transform:uppercase; }  

這條CSS不屬于任何一個(gè)BEM范疇，它僅僅只是一條多帶帶的樣式。

另一個(gè)沒(méi)有使用BEM的例子是：

.site-logo{}    

這是一個(gè)logo，我們可以把它寫成BEM格式，像下面這樣：

.header{}
.header__logo{} 

但我們沒(méi)必要這么做。使用BEM的訣竅是，你要知道什么時(shí)候哪些東西是應(yīng)該寫成BEM格式的。因?yàn)槟承〇|西確實(shí)是位于一個(gè)塊的內(nèi)部，但這并不意味它就是BEM中所說(shuō)的元素。這個(gè)例子中，網(wǎng)站logo完全是恰巧在.header的內(nèi)部，它也有可能在側(cè)邊欄或是頁(yè)腳里面。一個(gè)元素的范圍可能開(kāi)始于任何上下文，因此你要確定只在你需要用到BEM的地方你才使用它。再看一個(gè)例子：

  
Lorem ipsum dolor...
    

在這個(gè)例子里，我們也許僅僅只需要另一個(gè)class，可以叫它.headline；它的樣式取決于它是如何被層疊的，因?yàn)樗?content的內(nèi)部；或者它只是恰巧在.content的內(nèi)部。如果它是后者（即恰巧在.content的內(nèi)部，而不總是在）我們就不需要使用BEM。

然而，一切都有可能潛在地用到BEM。我們?cè)賮?lái)看一下.site-logo的例子，想象一下我們想要給網(wǎng)站增加一點(diǎn)圣誕節(jié)的氣氛，所以我們想有一個(gè)圣誕版的logo。于是我們有了下面的代碼：

.site-logo{}
.site-logo--xmas{}  

我們可以通過(guò)使用--修飾符來(lái)快速地為我們的代碼構(gòu)建另一個(gè)版本。

BEM最難的部分之一是明確作用域是從哪開(kāi)始和到哪結(jié)束的，以及什么時(shí)候使用（不使用）它。隨著接觸的多了，有了經(jīng)驗(yàn)積累，你慢慢就會(huì)知道怎么用，這些問(wèn)題也不再是問(wèn)題。

所以，BEM（或BEM的變體）是一個(gè)非常有用，強(qiáng)大，簡(jiǎn)單的命名約定，以至于讓你的前端代碼更容易閱讀和理解，更容易協(xié)作，更容易控制，更加健壯和明確而且更加嚴(yán)密。

盡管BEM看上去多少有點(diǎn)奇怪，但是無(wú)論什么項(xiàng)目，它對(duì)前端開(kāi)發(fā)者都是一個(gè)巨有價(jià)值的工具。

譯者手語(yǔ)：整個(gè)翻譯依照原文線路進(jìn)行，并在翻譯過(guò)程略加了個(gè)人對(duì)技術(shù)的理解。如果翻譯有不對(duì)之處，還煩請(qǐng)同行朋友指點(diǎn)。謝謝！

by 大漠

Yandex BEM/OOCSS

Template Components

BEM: The Block, Element, Modifier Approach To Decoupling HTML And CSS

CSS methodology and frameworks

Maintainable CSS with BEM

A New Front-End Methodology: BEM

What is BEM?

Rubbing Noses With inuit.css

SMACSS: Notes On Usage

What is BEM?

The History of BEM

Start developing BEM with project-stub

原文 MindBEMding – getting your head ’round BEM syntax

翻譯 David