BEM
There are only two hard problems in Computer Science: cache invalidation and naming things — Phil Karlton
BEM 是CSS的一種命名規(guī)范。BEM 分別是 Block、Element、Modifier
Block
Block 在BEM中就屬于一個模塊，這個模塊代表了頁面中的一個獨立的部分。
BEM 的規(guī)范是使用最簡單的類名來代表一個Block，BEM 規(guī)定Block 類名只能使用字母、數(shù)
字、破折號。并且一個Block類名就代表一個Block， 不使用用任何id 屬性等其他一些亂七八糟的東西. 一個好的Block名可以為 .i18n-header .
Element
Element 跟Block 捆綁在一起.
Element 類名比 Block 類名多了可以使用下劃線，還是雙下劃線。
在我們初學(xué)的使用會很自然的使用這樣的CSS選擇器來表示子類元素：.parent .children。 但是在 BEM 中為了使用更簡單的權(quán)重，BEM使用 一個類名來表示：.parent\_\_children 。雖然寫起來可能有點麻煩，但是你可以結(jié)合預(yù)處理語言，比如SCSS。同樣Element也
不會結(jié)合其他類名、id、其他父級元素來給頁面元素設(shè)置樣式，就簡單的寫在 .[Block]__[Element] 這樣的類名下。
Modifier
前面的 Block 和 Element 都可以想象成頁面中的某些元素或者塊。但是像一些元素的狀態(tài)這些就不能用前面兩個表示了。這些都?xì)w于 Modifier 管。
Modifier 不想 Element ，Modifier 跟Block Element 都沒有層級關(guān)系。他只是一個狀態(tài)
的表示。
Modifier 的命名就想 Element ，Modifier類名是在Block 或者 Element類名后面加--modifier. Modifier 比較特別，他可以結(jié)合Block 或者 Element來給DOM設(shè)置樣式。比如：.Block--big .Block__Elemnt { }
Example
我們來看看BEM官方是怎么寫樣式的(styl)：
/* Block */
.navbar
padding: 0 0 0 0
/* Modifier */
.navbar__item--title
a
&:hover
color: white
font-size: 18px
.navbar__menu
font-size: 12px
ul
padding: 0
li
white-space: nowrap
&.navbar__item--active
background-color: rgba(22, 22, 22, .5)
a
color: $black
a
color: white
&:hover
text-decoration: underline
深入淺出
其實到這里你就已經(jīng)知道BEM大概是個什么東西了?？梢钥垂俜轿臋n，（前段時間畢業(yè)了我
明顯的發(fā)現(xiàn)程序不看英文都是垃圾）。
為了能夠?qū)W好他，我覺得還是下載官方源碼學(xué)習(xí)學(xué)習(xí)。BEM 's github
通過看起代碼發(fā)現(xiàn)了寫東西：
- 不是每個樣式都放在.className中，還是有很多寫在tabName下的。
- Block 和 Element 這樣的類名一般都只會在選擇器的開始，除了少數(shù)在Modifier和后面。也就是說不會出現(xiàn)這樣的css ： table .Block {} 。
- Modifier 相比之下很是隨意。只要不結(jié)合不正確的Block 和 Element 就行。
BEM get
武漢的天氣開始熱了，我談了個女票。武漢的妹子又白又長，可惜我談的是廣東的。
