最近在寫博客主題的時(shí)候發(fā)現(xiàn)一個(gè)很嚴(yán)重的問題刨秆，由于css的命名并不是很規(guī)范行嗤，導(dǎo)致自己在后期修改的時(shí)候很是頭疼沈撞，有些樣式需要在瀏覽器中打開開發(fā)者工具去找肄方，很是無奈果善。所以決定在寫完主題之后學(xué)習(xí)下CSS命名規(guī)范中大名鼎鼎的BEM命名規(guī)范庭砍。
什么是BEM
BEM其實(shí)是塊（block）噪叙、元素（element）改基、修飾符（modifier）的縮寫阳液，利用不同的區(qū)塊怕敬，功能以及樣式來給元素命名。這三個(gè)部分使用__與--連接（這里用兩個(gè)而不是一個(gè)是為了留下用于塊兒的命名）帘皿。命名約定的模式如下：
.block{}
.block__element{}
.block--modifier{}
-
block代表了更高級(jí)別的抽象或組件 -
block__element代表block的后代东跪，用于形成一個(gè)完整的block的整體 -
block--modifier代表block的不同狀態(tài)或不同版本
上圖很直觀的反映出BEM的含義，block代表一個(gè)組鹰溜，而element代表組里面的成員虽填，而modifier，雖然在上圖沒有畫出曹动，但是可以知道這個(gè)則是用于描述每一個(gè)元素的具體的屬性斋日。可以看出范圍在一步步縮小墓陈，使命名更加具體恶守。
BEM的優(yōu)勢
BEM的關(guān)鍵是光憑class名字就可以讓其他開發(fā)者知道某個(gè)標(biāo)記用來做什么的第献，明白各個(gè)模塊之間的關(guān)系，例如如下的命名：
.nav{}
.nav__item{}
.nav--blue{}
.nav--item__hand{}
這幾個(gè)class名很明顯能看出各個(gè)塊兒的作用兔港，頂級(jí)快兒是nav庸毫，它有一些元素比如item，item又有一些屬性押框，例如blue，但是如果寫成常規(guī)的css就會(huì)很難看得出它們的關(guān)系：
.nav{}
.item{}
.blue{}
雖然看每一個(gè)class名知道它們代表什么理逊，但是卻看不出它們之間的關(guān)系橡伞，這樣對(duì)比，很明顯能看出BEM命名的優(yōu)勢晋被。
再看一個(gè)更具體的例子兑徘，如果寫一個(gè)搜索模塊，按照常規(guī)羡洛，我們會(huì)寫出如下代碼：
<form class="site-search full">
<input type="text" class="field">
<input type="Submit" value ="Search" class="button">
</form>
但是如果時(shí)用BEM規(guī)范去寫挂脑，代碼如下：
<form class="site-search site-search--full">
<input type="text" class="site-search__field">
<input type="Submit" value ="Search" class="site-search__button">
</form>
對(duì)比一下不難發(fā)現(xiàn)使用BEM可以使我們的代碼可讀性更高。
BEM與SCSS
現(xiàn)在的開發(fā)很多時(shí)候都會(huì)用到SCSS欲侮，那么如果使用SCSS的嵌套寫B(tài)EM規(guī)范呢崭闲，在SCSS中可以使用@at-root：
.block {
@at-root #{&}__element {
}
@at-root #{&}--modifier {
}
}
/*生成的css*/
.block {
}
.block__element {
}
.block--modifier {
}
非常的方便。
最后
在自己的博客主題項(xiàng)目中威蕉，因?yàn)槊碾S意導(dǎo)致后來再看樣式的時(shí)候都需要通過開發(fā)者工具去看具體這部分是做什么的刁俭，非常難受，所以想到應(yīng)該用一套規(guī)范約束一下命名韧涨，而BEM最為一個(gè)非常有用牍戚，強(qiáng)大的命名規(guī)范可以讓我們的代碼更容易閱讀和理解，也更容易控制虑粥，雖然這種命名方式看起來有點(diǎn)兒奇怪如孝，但是卻非常有用，非常值得學(xué)習(xí)娩贷。
