背景：
最近上了一個前端項目，技術(shù)棧是angular + ionic。
在聽別的前端人員討論的時候聽到一個詞叫BEM，當(dāng)時聽不懂，所以才有了這篇文章，適合前端初學(xué)者。
BEM是什么
BEM指的誰塊（Block）、元素（Element）、修飾符（modifier），它是Yandex團隊提出的一種前端命名方法論，可以讓你的CSS類對別的開發(fā)人員來說更加有意義，能夠一看類名就知道對應(yīng)的內(nèi)容。
Block指的是被劃分的一個獨立的模塊,例如一個header或者footer是block，header里面的搜索框也可以是block。
Modifier代表的是狀態(tài)，例如原來寫CSS中的 .current .active 等狀態(tài)
BEM 最多只有 B+E+M 三級。
現(xiàn)在的所說的BEM有很多種，很多在原始的版本以上已經(jīng)修改過，但是原則還是一樣的。“用它的思想，不一定要用它的命名方式”這句話就很有道理。
某一種BEM的例子
基本規(guī)則：
.block{} /*代表了更高級別的抽象或組件*/
.block__element{} /*代表.block的后代，用于形成一個完整的.block的整體*/
.block--modifier{} /*代表.block的不同狀態(tài)或不同版本。*/
上面的規(guī)則用的是兩個“-”或者兩個“_”是因為想讓你塊（block）可以用單個連字符來界定。例如：
.site-search{} /* 塊 */
.site-search__field{} /* 元素 */
.site-search--full{} /* 修飾符 */
實踐經(jīng)驗
在項目上，并不是說所有的CSS class都要用BEM來命名，我們只在需要用到BEM的時候才使用它，這個說法比較抽象。舉個例子，一個網(wǎng)站會有很多l(xiāng)ogo，logo會放在各個地方，所以不適合寫一個類似于 .header__logo這樣的class，只有在明確某個內(nèi)容一定是另外一個內(nèi)容的后代，才會用上BEM。
更多的經(jīng)驗可能需要積累，就自然而然的知道什么時候使用它了，目前只要知道BEM是什么，怎么用，大概什么時候用就夠了。
