不是所有的問題依靠使用工具都能完美解決，軟件的參與者不是工具而是人骡男。
工程師之間怎樣合作與配合俭尖，同樣很重要。
編碼約定洞翩，流程規(guī)范或者開發(fā)方法論稽犁，都有各自的作用。
BEM是一套前端開發(fā)方法論骚亿。
BEM methodology was invented at Yandex to develop sites which should be launched fast and supported for a long time. It helps to create extendable and reusable interface components.
如何重用代碼已亥，如何避免復(fù)制粘貼，如何降低復(fù)雜度来屠，如何重構(gòu)虑椎，如何書寫自文檔化的代碼？
當大家都按照同樣的開發(fā)方法去建構(gòu)軟件時俱笛，這些代碼層面的問題都逐漸消除了捆姜。
按相同規(guī)則寫的代碼更容易達到一致，能提高生產(chǎn)力迎膜，讓團隊合作更默契泥技。
它適合于所有的編程語言和框架。
1. BEM entity
Web開發(fā)中使用了各種技術(shù)磕仅，用了不同的語言珊豹，HTML簸呈，CSS，JavaScript等等店茶。
BEM使用了統(tǒng)一的術(shù)語Block蜕便，Element和Modifier來描述它們。
Block贩幻，Element轿腺，Modifier統(tǒng)稱為BEM entity.
（1）Block
Block是邏輯獨立的頁面單元，Block可以包含在其他Block中丛楚。
Block具有整體可移動性吃溅，且容易被復(fù)用。
（2）Element
Element用來構(gòu)成Block鸯檬，不能在Block外使用决侈。
（3）Modifier
Modifier用來定義Block或Element的表現(xiàn)形式或者行為。
兩個相同的Block使用了不同的Modifier可能看起來不一樣喧务。
注：
Block是一個整體性的概念赖歌，它的不同側(cè)面可以由不同的技術(shù)實現(xiàn)。例如：
行為：JavaScript功茴，CoffeeScript
表現(xiàn)：CSS庐冯，Stylus，Sass
模板：BEMHTML坎穿，BH展父，Pug，Handlebars玲昧，XSL
文檔：Markdown栖茉，Wiki，XML
2. Block redefinition & Redefinition level
BEM核心概念中還提到了設(shè)計原則孵延。
Block的最終實現(xiàn)通常會被劃分成不同的層次（redefinition level）吕漂，
每個更具體的層次，擴展或者覆蓋上一層次對Block的實現(xiàn)尘应。
Block的不同側(cè)面的實現(xiàn)方式都可以按層次進行設(shè)計惶凝。
我們引入一個第三方庫（library level），當我們想修改Block的展示方式時犬钢，
并不需要修改第三方庫中的源碼苍鲜，而是新建一個更具體的層次，
寫一些附加的CSS規(guī)則在工程層（project level）上覆蓋上層的實現(xiàn)即可玷犹。
層次概念不僅可以體現(xiàn)在代碼的邏輯結(jié)構(gòu)上混滔，還能體現(xiàn)在文件組織方式上。
library.blocks/
button/
button.css # CSS implementation in the linked library (height 20px)
project.blocks/
button/
button.css # Redefinition of CSS implementation (height 24px)
3. 命名規(guī)范
隨意命名會打破Block，Element與Modifier之間的層次關(guān)系遍坟。
因此，我們需要增加分隔符來表示BEM結(jié)構(gòu)晴股。
下面我們以表現(xiàn)層的CSS為例愿伴，來進行說明。
（1）Block name
Block的名字代表了Block中的Element和Modifier的有效范圍电湘。
例如：menu
<div class="menu">...</div>
（2）Element name
Element名字與Block名字用雙下劃線分隔__隔节。
例如：menu__item
<div class="menu">
...
<span class="menu__item"></span>
</div>
（3）Modifier name
Modifier的名字與所屬的Block或Element用單下劃線分隔_。
例如：menu_hidden
<div class="menu menu_hidden">...</div>
<div class="menu">
...
<span class="menu__item menu__item_visible menu__item_type_radio"></span>
</div>
注：menu__item_type_radio寂呛，Modifer的值與名字也用單下劃線分隔_怎诫。
此外還有幾種其他命名規(guī)范可供選擇：
Harry Roberts' style，CamelCase style贷痪，
"Sans underscore" style幻妓，No namespace style
4. JavaScript for BEM
在JavaScript中，Modifier用來表示一個Block或Element的行為邏輯劫拢，即它們的狀態(tài)肉津。
BEM使得JavaScript操作的對象不再是CSS class而是Block，Element或者Modifier舱沧。
document.querySelector('.button').addEventListener('click', function() {
document.querySelector('.popup').classList.toggle('popup_visible');
}, false);
以上代碼可以改寫為：
block('button').click(function() {
block('popup').toggleMod('visible');
});
Modifier可以看做Block的狀態(tài)妹沙，實現(xiàn)了Block的行為邏輯。
通過增刪Modifier熟吏，Block可以完成狀態(tài)間的跳轉(zhuǎn)距糖。
i-bem.js是遵循BEM方法論的一個JavaScript框架。
（1）它使得我們可以用Block牵寺，Element以及Modifier來開發(fā)軟件悍引。
（2）它用聲明狀態(tài)的方式來描述Block的邏輯。
（3）非常方便的與BEM風格的模板或CSS集成帽氓。
（4）Block的實現(xiàn)按層次可以靈活的重新定義（redefine）吗铐。
5. File system
BEM，不但影響了我們進行開發(fā)的方式杏节，而且唬渗，還影響了我們組織文件的方式。
不僅接口文件放在獨立的文件中奋渔，Block的實現(xiàn)也被放在了不同的文件中镊逝。
當文件發(fā)送到瀏覽器中時，會被優(yōu)化嫉鲸，BEM方式區(qū)分了我們看到的代碼和發(fā)送給瀏覽器的代碼撑蒜。
BEM的文件組織原則如下：
（1）一個Block的具體實現(xiàn)被劃分為不同的組成部分
（2）可選的Element和Modifier被存儲在不同的文件中
（3）文件按邏輯含義放在一起，而不是按文件類型
（4）一個工程被劃分成多個可被重定義的層級（redefinition level）
例如：
blocks/
input/
_type/ # type modifier directory
input_type_search.css # Implementation of modifier type
# with value search in CSS technology
__box/ # box element directory
input__box.css
input.css
input.js
button/
button.css
button.js
button.png
參考：
BEM - Frontend Development Methodology
Github: awesome-bem
