什么是BEM
BEM其實是塊（block）、元素（element）透葛、修飾符（modifier）的縮寫，利用不同的區(qū)塊卿樱，功能以及樣式來給元素命名僚害。這三個部分使用__與--連接（這里用兩個而不是一個是為了留下用于塊兒的命名）。命名約定的模式如下：
.block{}
.block__element{}
.block--modifier{}
- block 代表了更高級別的抽象或組件
- block__element 代表 block 的后代繁调，用于形成一個完整的 block 的整體
- block--modifier代表 block 的不同狀態(tài)或不同版本(常用作修飾)
BEM的優(yōu)勢
BEM的關(guān)鍵是光憑class名字就可以讓其他開發(fā)者知道某個標(biāo)記用來做什么的萨蚕，明白各個模塊之間的關(guān)系，例如如下的命名：
.nav{}
.nav__item{}
.nav--blue{}
很明顯最頂級塊為nav蹄胰，它有子元素如item岳遥，item又有一些屬性，例如blue;這樣的命名比我們平時的命名優(yōu)勢在于能夠一眼看出各個css之間的關(guān)系裕寨。
再比如一個搜索模塊浩蓉，平時的寫法是：
<form class="site-search full">
<input type="text" class="field">
<input type="Submit" value ="Search" class="button">
</form>
BEM的寫法為：
<form class="site-search site-search--full">
<input type="text" class="site-search__field">
<input type="Submit" value ="Search" class="site-search__button">
</form>
BEM與SCSS的關(guān)系
現(xiàn)在的開發(fā)很多時候都會用到SCSS，那么如果使用SCSS的嵌套寫B(tài)EM規(guī)范呢宾袜，在SCSS中可以使用@at-root：
.block {
@at-root #{&}__element {
}
@at-root #{&}--modifier {
}
}
/*生成的css*/
.block {
}
.block__element {
}
.block--modifier {
}
非常的方便捻艳。
