背景
經(jīng)常我們在給一個大型網(wǎng)站寫頁面的css時候题禀，經(jīng)常會出現(xiàn)如下的css編寫效果。
.container .form .input .warpper .icon {
/*寫入你需要的css*/
}
.container .form .text {
/*寫入你需要的css*/
}
.page .warpper .layout .content{
/*寫入你需要的css*/
}
這樣的css編寫效果就是傳統(tǒng)的命名空間的方式寫css峭跳，它很好得解決了編寫單純?nèi)謈ss互相影響的問題，但是另外一方面它也引申出了一些問題：
- 維護css的時候，只看HTML误证，我們無法知道當前css的作用范圍，css的表現(xiàn)不夠一目了然修壕。
- 如果我要覆蓋css的樣式愈捅，可能我就需要利用css的優(yōu)先級的規(guī)則去覆蓋原有的css，這樣就會導致css優(yōu)先級競爭慈鸠。
- css編寫的時候復用性不高蓝谨，當存在多個樣式一致的時候，我們可能會選擇減少命名空間的方式來提升當前css的作用范圍青团，但是可能會導致css樣式?jīng)_突的問題譬巫。
由于我們的行業(yè)很棒，我們有很多推薦的解決方案督笆。因為專家們的紛紛加入芦昔，于是我們有 BEM，OOCSS娃肿，SMACSS咕缎，Atomic Design 等許多選擇。
CSS 規(guī)范究竟在解決什么問題
- 我必須 立即知道編輯一個
class是否安全咸作，會不會干擾其他 CSS锨阿。這是最重要的，特別是當我需要在短時間內(nèi)進行修改時记罚。我不想因為改變一處而破壞別的東西墅诡。 - 我必須立即知道一個
class放在這個偉大工程中的什么地方，以防止大腦過載桐智。這樣我就可以快速修改style末早，而不必在整個工程里前后引用。 -
class必須 盡可能少说庭，因為看到一長串的class時我頭很暈然磷。 - 我必須 立即知道一個組件是否使用了 JavaScript，所以如果我改變了它的 CSS刊驴，我不會意外地破壞任何組件姿搜。
在我的探索中寡润，BEM規(guī)范進入了我的視線。
什么是BEM
如果你從未接觸過BEM舅柜，那么你第一次接觸到BEM的時候它是長這個樣子的梭纹。
.block { /* styles */ }
.block__element { /* styles */ }
.block--modifier { /* styles */ }
期中的BEM分別對應block ， element 和 modifier致份。
什么是塊
在規(guī)范中变抽，塊表示一個組件的意思，這樣看上去有點抽象氮块，我們可以通過例子來學習绍载，假設(shè)你要寫一個按鈕的組件。我們只需要設(shè)置了一個 .button 類的按鈕滔蝉，然后可以在任何<button>按鈕上使用該類击儡，就可以生成該組件的傳統(tǒng)樣式。
使用.button而不是用button的原因是因為類允許無限的可重用性蝠引，而即使是最基本的元素也可能改變樣式曙痘。
但是在實際的項目使用中，我們會發(fā)現(xiàn)一個按鈕可能是大按鈕立肘，可能是小按鈕边坤，也可能是紅色的，或者黃色的谅年。于是就引申出了BEM的modifier茧痒。
什么是修飾符
修飾符是改變某個塊的外觀的標志。要使用修飾符融蹂，可以將 --modifier 添加到塊中旺订。
假如我們要添加一個默認按鈕，一個主要按鈕超燃，一個大按鈕区拳，一個小按鈕，一個主要的小按鈕意乓。
我們可以這樣:
<button class=".button .button--default"></button>
<button class=".button .button--primary"></button>
<button class=".button .button--large"></button>
<button class=".button .button--small"></button>
<button class=".button .button--primary .button--small"></button>
如果會scss或任何其他預處理器的mixin樱调，我們就可以減少一些class，寫成這樣:
<button class=".button--default"></button>
<button class=".button--primary"></button>
<button class=".button--large"></button>
<button class=".button--small"></button>
<button class=".button--small--primary"></button>
什么是元素
元素是塊的子節(jié)點届良。為了表明某個東西是一個元素笆凌，你需要在塊名后添加 __element。所以士葫，如果你看到一個像那樣的名字乞而，比如 form__row ，你將立即知道 .form 塊中有一個 row 元素慢显。
<form class="form" action="">
<div class="form__row">
</div>
</form>
<style>
.form__row { /* styles */ }
</style>
BEM 元素有兩個優(yōu)點 ：
- 你可以讓 CSS 的優(yōu)先級保持相對扁平爪模。
- 你能立即知道哪些東西是一個子元素欠啤。
總結(jié)
以上就是簡單的BEM規(guī)范和使用方法的簡單介紹∥莨啵基本的BEM規(guī)范的使用可以解決之前提到的一些問題：
- class 的數(shù)量必須盡可能少 跪妥，防止了css的優(yōu)先級競爭。
-
立即知道一個
class放在這個偉大工程中的什么地方声滥，以防止大腦過載。
但是還有在實際應用中還有一些問題沒有解決侦香。
- 我必須 立即知道組件是否使用 JavaScript 落塑。
- 我必須 立即知道編輯一個
class是否安全,會不會干擾其他 CSS。
剩下的問題罐韩，我們就需要命名空間配合BEM來解決憾赁。
