時間：2016-11-04 20:04:53
原文地址：https://github.com/zhongxia245/blog/issues/48
一梆暮、背景
挺早就聽說過BEM了，也大概的知道怎么用绍昂，但是具體 BEM 指啥啦粹，具體有啥要求偿荷，還不是很清楚，然后今天就學(xué)習(xí)了下唠椭。
二跳纳、BEM（Block，Element贪嫂，Modifier）
BEM的意思就是塊（block）寺庄、元素（element）、修飾符（modifier）,是由Yandex團隊提出的一種前端命名方法論力崇。這種巧妙的命名方法讓你的CSS類對其他開發(fā)者來說更加透明而且更有意義斗塘。BEM命名約定更加嚴(yán)格，而且包含更多的信息亮靴，它們用于一個團隊開發(fā)一個耗時的大項目馍盟。
重要的是要注意，我使用的基于BEM的命名方式是經(jīng)過Nicolas Gallagher修改過的茧吊。這篇文章中介紹的這種命名技術(shù)并不是原始的BEM贞岭，但卻是一個我更喜歡的改進(jìn)版。無論實際使用了什么樣的符號搓侄，它們其實都是基于同樣的BEM原則瞄桨。
命名約定的模式如下：
.block{}
.block__element{}
.block--modifier{}
- .block 代表了更高級別的抽象或組件。
- .block__element 代表.block的后代讶踪，用于形成一個完整的.block的整體芯侥。
- .block--modifier代表.block的不同狀態(tài)或不同版本。
之所以使用兩個連字符和下劃線而不是一個乳讥，是為了讓你自己的塊可以用單個連字符來界定筹麸，如：
.site-search{} /* 塊 */
.site-search__field{} /* 元素 */
.site-search--full{} /* 修飾符 */
三、總結(jié)
- B： block 雏婶，某一塊展示/功能區(qū)域（div, 比如： nav
- E： Element物赶， 這塊展示/功能區(qū)域（div）里面的某個元素，比如: nav__item
- M：Modifier留晚， 某個元素或者某個塊的狀態(tài)酵紫，比如 nav--hide, nav__item--open 啥的
例子：
B：header-tabs //名字隨便
E：header-tabs__item //多個tab選項
M：header-tabs__item--active //選中狀態(tài)
