特別聲明：此篇文章由David根據(jù)csswizardry的英文文章原名《MindBEMding – getting your head ’round BEM syntax》進(jìn)行翻譯茴扁，整個(gè)譯文帶有我們自己的理解與思想嘶摊，如果譯得不好或不對(duì)之處還請(qǐng)同行朋友指點(diǎn)除师。如需轉(zhuǎn)載此譯文，需注明英文出處：http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax以及作者相關(guān)信息
——作者：csswizardry
——譯者：David
人們問我最多的問題之一是在CSS類名中“--”和“__”是什么意思架馋？它們的出現(xiàn)是源于BEM和Nicolas Gallagher...
BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團(tuán)隊(duì)提出的一種前端命名方法論窗看。這種巧妙的命名方法讓你的CSS類對(duì)其他開發(fā)者來說更加透明而且更有意義盐固。BEM命名約定更加嚴(yán)格荒给，而且包含更多的信息，它們用于一個(gè)團(tuán)隊(duì)開發(fā)一個(gè)耗時(shí)的大項(xiàng)目刁卜。
重要的是要注意志电，我使用的基于BEM的命名方式是經(jīng)過Nicolas Gallagher修改過的。這篇文章中介紹的這種命名技術(shù)并不是原始的BEM蛔趴，但卻是一個(gè)我更喜歡的改進(jìn)版挑辆。無論實(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è)連字符來界定羔挡，如：
.site-search{} /* 塊 */
.site-search__field{} /* 元素 */
.site-search--full{} /* 修飾符 */
BEM的關(guān)鍵是光憑名字就可以告訴其他開發(fā)者某個(gè)標(biāo)記是用來干什么的。通過瀏覽HTML代碼中的class屬性，你就能夠明白模塊之間是如何關(guān)聯(lián)的：有一些僅僅是組件笙各，有一些則是這些組件的子孫或者是元素,還有一些是組件的其他形態(tài)或者是修飾符。我們用一個(gè)類比/模型來思考一下下面的這些元素是怎么關(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來說肠虽，是指女性人類還是某種雌性的動(dòng)物幔戏？還有.hand，是在說一只鐘表的指針（譯注：英文中hand有指針的意思）税课？還是一只正在玩紙牌的手闲延？使用BEM我們可以獲得更多的描述和更加清晰的結(jié)構(gòu)，單單通過我們代碼中的命名就能知道元素之間的關(guān)聯(lián)韩玩。BEM真是強(qiáng)大垒玲。
再來看一個(gè)之前用‘常規(guī)’方式命名的.site-search的例子：
<form class="site-search full">
<input type="text" class="field">
<input type="Submit" value ="Search" class="button">
</form>
這些CSS類名真是太不精確了，并不能告訴我們足夠的信息找颓。盡管我們可以用它們來完成工作合愈，但它們確實(shí)非常含糊不清。用BEM記號(hào)法就會(huì)是下面這個(gè)樣子：
<form class="site-search site-search--full">
<input type="text" class="site-search__field">
<input type="Submit" value ="Search" class="site-search__button">
</form>
我們能清晰地看到有個(gè)叫.site-search的塊击狮，他內(nèi)部是一個(gè)叫.site-search__field的元素佛析。并且.site-search還有另外一種形態(tài)叫.site-search--full。
我們?cè)賮砼e個(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)膘茎。僅僅通過CSS選擇器的名字我們就能獲取到以上全部信息。
BEM的另外一個(gè)好處是針對(duì)下面這種情況：
<div class="media">
<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兩個(gè)class彼此之間是如何相互關(guān)聯(lián)的披坏？同樣我們也無從知曉.body和.lede之間，或者.img-rev 和.media之間各是什么關(guān)系盐数？從這段HTML（除非你對(duì)那個(gè)media對(duì)象非常了解）中我們也不知道這個(gè)組件是由什么組成的和它還有什么其他的形態(tài)刮萌。如果我們用BEM方式重寫這段代碼：
<div class="media">
<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是一個(gè)塊，.media__img--rev是一個(gè)加了修飾符的.media__img的變體娘扩，它是屬于.media的元素着茸。而.media__body是一個(gè)尚未被改變過的也是屬于.media的元素。所有以上這些信息都通過它們的class名稱就能明白琐旁，由此看來BEM確實(shí)非常實(shí)用涮阔。
丑極了！
通常人們會(huì)認(rèn)為BEM這種寫法難看灰殴。我敢說敬特，如果你僅僅是因?yàn)檫@種代碼看上去不怎么好看而羞于使用它，那么你將錯(cuò)失最重要的東西牺陶。除非使用BEM讓代碼增加了不必要的維護(hù)困難伟阔，或者這么做確實(shí)讓代碼更難讀了，那么你在使用它之前就要三思而行了掰伸。但是皱炉，如果只是“看起來有點(diǎn)怪”而事實(shí)上是一種有效的手段，那么我們?cè)陂_發(fā)之前當(dāng)然應(yīng)該充分考慮它狮鸭。
是合搅，BEM看上去確實(shí)怪怪的，但是它的好處遠(yuǎn)遠(yuǎn)超過它外觀上的那點(diǎn)瑕疵歧蕉。
BEM可能看上去有點(diǎn)滑稽灾部，而且有可能導(dǎo)致我們輸入更長(zhǎng)的文本（大部分編輯器都有自動(dòng)補(bǔ)全功能，而且gzip壓縮將會(huì)讓我們消除對(duì)文件體積的擔(dān)憂）惯退，但是它依舊強(qiáng)大赌髓。
用還是不用BEM?
我在我的所有項(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)記住你沒必要真的在每個(gè)地方都用上它逃呼。比如：
.caps{ text-transform:uppercase; }
這條CSS不屬于任何一個(gè)BEM范疇，它僅僅只是一條單獨(dú)的樣式者娱。
另一個(gè)沒有使用BEM的例子是：
.site-logo{}
這是一個(gè)logo抡笼，我們可以把它寫成BEM格式，像下面這樣：
.header{}
.header__logo{}
但我們沒必要這么做黄鳍。使用BEM的訣竅是推姻，你要知道什么時(shí)候哪些東西是應(yīng)該寫成BEM格式的。因?yàn)槟承〇|西確實(shí)是位于一個(gè)塊的內(nèi)部框沟，但這并不意味它就是BEM中所說的元素藏古。這個(gè)例子中增炭，網(wǎng)站logo完全是恰巧在.header的內(nèi)部，它也有可能在側(cè)邊欄或是頁(yè)腳里面拧晕。一個(gè)元素的范圍可能開始于任何上下文隙姿，因此你要確定只在你需要用到BEM的地方你才使用它。再看一個(gè)例子：
<div class="content">
<h1 class="content__headline">Lorem ipsum dolor...</h1>
</div>
在這個(gè)例子里厂捞，我們也許僅僅只需要另一個(gè)class输玷，可以叫它.headline；它的樣式取決于它是如何被層疊的靡馁，因?yàn)樗?content的內(nèi)部欲鹏；或者它只是恰巧在.content的內(nèi)部。如果它是后者（即恰巧在.content的內(nèi)部臭墨，而不總是在）我們就不需要使用BEM赔嚎。
然而，一切都有可能潛在地用到BEM裙犹。我們?cè)賮砜匆幌?site-logo的例子尽狠，想象一下我們想要給網(wǎng)站增加一點(diǎn)圣誕節(jié)的氣氛，所以我們想有一個(gè)圣誕版的logo叶圃。于是我們有了下面的代碼：
.site-logo{}
.site-logo--xmas{}
我們可以通過使用--修飾符來快速地為我們的代碼構(gòu)建另一個(gè)版本袄膏。
BEM最難的部分之一是明確作用域是從哪開始和到哪結(jié)束的，以及什么時(shí)候使用（不使用）它掺冠。隨著接觸的多了沉馆，有了經(jīng)驗(yàn)積累，你慢慢就會(huì)知道怎么用德崭，這些問題也不再是問題斥黑。
結(jié)束語(yǔ)
所以，BEM（或BEM的變體）是一個(gè)非常有用眉厨，強(qiáng)大锌奴，簡(jiǎn)單的命名約定，以至于讓你的前端代碼更容易閱讀和理解憾股，更容易協(xié)作鹿蜀，更容易控制，更加健壯和明確而且更加嚴(yán)密服球。
盡管BEM看上去多少有點(diǎn)奇怪茴恰，但是無論什么項(xiàng)目，它對(duì)前端開發(fā)者都是一個(gè)巨有價(jià)值的工具斩熊。
譯者手語(yǔ)：整個(gè)翻譯依照原文線路進(jìn)行往枣，并在翻譯過程略加了個(gè)人對(duì)技術(shù)的理解。如果翻譯有不對(duì)之處，還煩請(qǐng)同行朋友指點(diǎn)分冈。謝謝圾另！
關(guān)于David
2009年開始接觸前端開發(fā)，2011年組建創(chuàng)業(yè)團(tuán)隊(duì)——[五維互動(dòng)]丈秩，2012年團(tuán)隊(duì)被“收編”并更名[創(chuàng)影互動(dòng)]盯捌，遂只身來上海發(fā)展，現(xiàn)在就職于FlipScript蘑秽。歡迎交流共勉：騰訊微博、個(gè)人博客箫攀。
如需轉(zhuǎn)載煩請(qǐng)注明出處：
英文原文：http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
中文譯文：http://www.w3cplus.com/css/mindbemding-getting-your-head-round-bem-syntax.html
