BEM即塊(Block)、元素(Element)蜜徽、修飾符(modifier)腋么，是由著名的俄羅斯搜索引擎團(tuán)隊(duì)Yandex提出的一種前端命名方法論。BEM命名約定更加嚴(yán)格腾么，而且包含更多的信息奈梳，一般用于團(tuán)隊(duì)開發(fā)一個(gè)耗時(shí)的大項(xiàng)目中。
我們常見的BEM命名方式一般都是經(jīng)過改良的解虱，本文介紹的是Nicolas Gallagher（Twitter前端工程師）的改進(jìn)版攘须。
命名約定的格式如下：
.block{...}/* 代表更高級別的抽象或組件 */.block__element{...}/* 代表.block的后代，用于形成一個(gè)完整的block整體 */.block--modifier{...}/* 代表block的不同狀態(tài)或不同版本 */
之所以使用兩個(gè)連字符和下劃線而不是一個(gè)殴泰，是為了讓自己定義的塊可以用單個(gè)連字符來界定于宙，如：
.myHeader-search{...}/* 自定義的某個(gè)塊 */.myHeader-search__textElement{...}/* 自定義塊中的textElement元素 */.myHeader-search--full{...}/* 自定義塊中的full修飾符 */
BEM的關(guān)鍵在于，光憑名字就可以告訴其他開發(fā)者某個(gè)標(biāo)記(class)是用來干什么的艰匙。通過直觀地閱讀class屬性限煞，我們就能明白模塊之間是如何關(guān)聯(lián)的：有一些僅僅是組件，有一些則是這些組件的子孫或者元素员凝，還有一些是組件其他形態(tài)或者是修飾符署驻。我們通過下面的示例來進(jìn)一步說明：
上面的代碼使用了常規(guī)CSS來表示，各個(gè)class都是有意義的健霹，但是他們之間卻是脫節(jié)的旺上，拿female來說，是指女性人類還是指某種雌性的動物糖埋？hand是在表示指針（英文hand有鐘表指針的含義）還是一只正在玩指紙牌的手呢宣吱？使用BEM我們可以獲得更多的描述和更加清晰的結(jié)構(gòu)，并且通過命名我們就可以知道元素之間的關(guān)聯(lián)瞳别。代碼如下：
再看一個(gè)常規(guī)方式命名的例子：
? ? ? ?
上面的命名不好的地方就在于名稱不夠精確征候，不能告訴我們足夠的信息杭攻。盡管我們可以用它們完成工作，但它們確實(shí)非常含糊不清疤坝，不夠優(yōu)雅兆解。使用BEM記號法后就是下面的代碼：
? ? ? ? ? ?
在上面的代碼中，我們可以清晰地看到有個(gè)叫.site-search的塊跑揉，內(nèi)部有個(gè)叫做.site-search__field的元素锅睛，并且site-search還有另一種形態(tài)叫做.site-search–full
通常人們會認(rèn)為BEM這種寫法難看。但是历谍，如果僅僅認(rèn)為這種寫法看上去不怎么好看而羞于使用现拒，那么我們將錯(cuò)失最重要的東西。
BEM看上去有些怪怪的望侈，但是它的好處遠(yuǎn)遠(yuǎn)超過外觀上的瑕疵
BEM有可能導(dǎo)致輸入更長的文本印蔬，但是大部分編輯器都有代碼自動補(bǔ)全的功能，而且gzip壓縮將會讓我們消除對文件體積的擔(dān)憂
BEM命名規(guī)則：http://segmentfault.com/a/1190000000391762
class命名方案：http://www.w3cplus.com/css/css-class-name.html
常用的CSS命名規(guī)范：http://www.html5cn.org/article-7600-1.html
通用CSS筆記甜无、建議與指導(dǎo)：https://github.com/chadluo/CSS-Guidelines/blob/master/README.md
CSS代碼重構(gòu)和優(yōu)化之路：http://luopq.com/2016/01/05/css-optimize/
CSS進(jìn)階：http://caibaojian.com/toutiao/6098
老九學(xué)堂出品扛点，轉(zhuǎn)載請私信哦
對于文章內(nèi)容有不理解的可以添加老九君個(gè)人QQ：614940318，請備注來自簡書
老九學(xué)堂免費(fèi)C岂丘、C++陵究、Java課程地址：
https://study.163.com/courses-search?keyword=%E8%80%81%E4%B9%9D%E5%AD%A6%E5%A0%82
