BEM顧名思義是由塊（Block）完残、元素（Element）和修飾符（Modifier）這三個不同組成的症概。
1）塊即是通常所說的 Web 應(yīng)用開發(fā)中的組件或模塊廉沮。每個塊在邏輯上和功能上都是相互獨立的；
2）元素是塊中的組成部分。元素不能離開塊來使用指厌。BEM 不推薦在元素中嵌套其他元素；
3）修飾符是改變某個塊的外觀的標(biāo)志。
目前來說纲爸，比較流行的是由 Harry Roberts 提出的命名規(guī)范，該命名規(guī)則的原則如下：
1）BEM 實體名稱全部是小寫字母或數(shù)字妆够。名稱中的不同單詞用單個連字符（-）分隔识啦。
2）BEM 元素名稱和塊名稱之間通過兩個下劃線（__）分隔。
3）布爾修飾符和其所修飾的實體名稱之間通過兩個連字符（--）來分隔神妹。不使用名值對修飾符颓哮。
讓我們來看幾個BEM的例子：
.person{}
.person__hand{}
.person--female{}
.person--female__hand{}
.person__hand--left{}
頂級塊是"person"，它擁有一些元素鸵荠，如"hand"冕茅。一個人也會有其他形態(tài)，比如女性"female"蛹找，這種形態(tài)進而也會擁有它自己的元素嵌赠。
一個head模塊可以包含多個塊，如 logo塊（logo）熄赡、搜索模塊（search-form）姜挺、導(dǎo)航模塊（menu）。其中搜索模塊又有兩個元素彼硫，輸入框（search-form__input）和按鈕（search-form__btn）炊豪；這時候如果搜索模塊的按鈕需要一個禁止點擊的行為狀態(tài)，那還可以通過修飾符來表現(xiàn)命名比如：search-form__btn--disabled拧篮。
那從上面的例子我們就可以很清楚的看出來采用BEM命名規(guī)范有幾個好處：
1）首先是命名識別度高词渤，結(jié)構(gòu)清晰。element 和 modifier 與 block 之間的從屬關(guān)系串绩，可以從名稱上就一目了然的區(qū)分缺虐。
2）其次，命名隔離性好礁凡。每一個 Block 都有一個獨立的空間高氮，很好的控制了對其他元素的污染慧妄。
3）再次，良好的擴展性剪芍。如果新的 block 只是和原來的 block 有不同的皮膚顏色或者狀態(tài)塞淹，那么，只需要再創(chuàng)建一個新的 modifier罪裹。
