原文鏈接：https://segmentfault.com/a/1190000000391762
人們問我最多的問題之一是在CSS類名中--和__是什么意思宴抚？它們的出現(xiàn)是源于BEM和Nicolas Gallagher...
BEM的意思就是塊（block）汰现、元素（element）、修飾符（modifier）,是由Yandex團(tuán)隊(duì)提出的一種前端命名方法論。這種巧妙的命名方法讓你的CSS類對其他開發(fā)者來說更加透明而且更有意義。BEM命名約定更加嚴(yán)格槐壳，而且包含更多的信息，它們用于一個(gè)團(tuán)隊(duì)開發(fā)一個(gè)耗時(shí)的大項(xiàng)目。
重要的是要注意吨拗，我使用的基于BEM的命名方式是經(jīng)過Nicolas Gallagher修改過的。這篇文章中介紹的這種命名技術(shù)并不是原始的BEM，但卻是一個(gè)我更喜歡的改進(jìn)版劝篷。無論實(shí)際使用了什么樣的符號哨鸭，它們其實(shí)都是基于同樣的BEM原則。
命名約定的模式如下：
.block{}
.block__element{}
.block--modifier{}
-
.block代表了更高級別的抽象或組件娇妓。 -
.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{}
頂級塊是‘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記號法就會(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。
我們再來舉個(gè)例子……
如果你熟悉OOCSS（面向?qū)ο驝SS）披蕉，那么你對media對象一定也不陌生颈畸。用BEM的方式乌奇，media對象就會(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è)好處是針對下面這種情況：
<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兩個(gè)class彼此之間是如何相互關(guān)聯(lián)的困乒？同樣我們也無從知曉.body和.lede之間寂屏，或者.img-rev
和.media之間各是什么關(guān)系？從這段HTML（除非你對那個(gè)media對象非常了解）中我們也不知道這個(gè)組件是由什么組成的和它還有什么其他的形態(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是一個(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í)上是一種有效的手段捷雕，那么我們在開發(fā)之前當(dāng)然應(yīng)該充分考慮它。
是壹甥，BEM看上去確實(shí)怪怪的救巷，但是它的好處遠(yuǎn)遠(yuǎn)超過它外觀上的那點(diǎn)瑕疵。
BEM可能看上去有點(diǎn)滑稽句柠，而且有可能導(dǎo)致我們輸入更長的文本（大部分編輯器都有自動(dòng)補(bǔ)全功能浦译，而且gzip壓縮將會(huì)讓我們消除對文件體積的擔(dān)憂），但是它依舊強(qiáng)大溯职。
用還是不用BEM?
我在我的所有項(xiàng)目中都使用了BEM記號法管怠，因?yàn)樗挠行砸呀?jīng)被它自己一次又一次地證明。我也極力地建議別人使用BEM缸榄，因?yàn)樗屗袞|西之間的聯(lián)系變得更加緊密，讓團(tuán)隊(duì)甚至是你個(gè)人都能夠更加容易地維護(hù)代碼祝拯。
然而甚带，當(dāng)你真正使用BEM的時(shí)候她肯，重要的是，請記住你沒必要真的在每個(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è)邊欄或是頁腳里面侨赡。一個(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鲫售。我們再來看一下.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é)束語
所以，BEM（或BEM的變體）是一個(gè)非常有用苔货，強(qiáng)大犀概，簡單的命名約定立哑，以至于讓你的前端代碼更容易閱讀和理解，更容易協(xié)作姻灶，更容易控制铛绰，更加健壯和明確而且更加嚴(yán)密。
盡管BEM看上去多少有點(diǎn)奇怪产喉，但是無論什么項(xiàng)目捂掰，它對前端開發(fā)者都是一個(gè)巨有價(jià)值的工具。
譯者手語：整個(gè)翻譯依照原文線路進(jìn)行曾沈，并在翻譯過程略加了個(gè)人對技術(shù)的理解这嚣。如果翻譯有不對之處，還煩請同行朋友指點(diǎn)晦譬。謝謝疤苹！
擴(kuò)展閱讀
by 大漠
- Yandex BEM/OOCSS
- Template Components點(diǎn)擊預(yù)覽
- 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
