摘要：在這篇譯什么是我們?yōu)槭裁葱枰麄兊慕Y(jié)尾處，明確指出不需要，那么到底是什么呢下面我將把官網(wǎng)的教程翻譯出來，帶領(lǐng)大家搞清楚前端領(lǐng)域的到底是什么。命名在計算機科學(xué)領(lǐng)域，只有個非常難解決的問題一個是緩存失效，而另一個則是命名。

在這篇【譯】什么是CSS Modules ？我們?yōu)槭裁葱枰麄?？的結(jié)尾處，明確指出CSS Modules不需要BEM，那么BEM到底是什么呢？

下面我將把BEM官網(wǎng)的教程翻譯出來，帶領(lǐng)大家搞清楚前端領(lǐng)域的BEM到底是什么。

BEM - Block Element Modfier（塊元素編輯器）是一個很有用的方法，它可以幫助你創(chuàng)建出可以復(fù)用的前端組件和前端代碼

它有如下3個特性：

易用性 如果想使用BEM，你只需要采用BEM命名規(guī)范即可

單元性 獨立的塊和CSS選擇器，可以使得你的代碼可重用和單元化

靈活性 使用BEM之后，方法和工具可以按照你喜歡的方式去組織和配置

下面將從3個方面來分析BEM到底是什么？

介紹

BEM是一個高可用的，強大的，而且簡單的命名規(guī)范，它可以使得你的前端代碼更加易讀和理解，容易與他人協(xié)作，容易擴展，更加強壯和明確，關(guān)鍵是更加嚴謹。

命名

BEM的方法，可以確保參與網(wǎng)站開發(fā)的每一個人，都能夠使用一個代碼庫并且使用同一種語言。使用BEM格式的命名規(guī)范，可以從容應(yīng)對需求變更。

FAQ

為什么不適用語義化的標簽而是直接去使用為塊元素添加CSS class呢？

我可以像button.button的方式去組合標簽和class到同一個選擇器中嗎？

還要更多的疑惑，可以查看FAQ列表！

在小型手冊網(wǎng)站上，如何組織你的風(fēng)格通常不是一個大問題。你進入那里，寫一些CSS，或者甚至是一些SASS。用SASS的生產(chǎn)設(shè)置將它編譯成一個樣式表，然后將它聚合到一起，將模塊中的所有樣式表都變成一個很好的整潔包。

但是，當(dāng)涉及到更大，更復(fù)雜的項目時，組織代碼的方式至少有以下三種方式是提高效率的關(guān)鍵：它影響編寫代碼需要多長時間，需要多少代碼寫和你的瀏覽器將不得不做多少加載。當(dāng)你與團隊合作并且高性能是必不可少的時候，這變得尤為重要。

這對于使用遺留代碼的長期項目也是如此（請參閱“如何使用Sass和SMACSS來擴展和維護傳統(tǒng)CSS” - 一些不錯的SMACSS和BEM混合）。

方法
目前有很多方法可以減少CSS占用空間，組織程序員之間的合作以及維護大型CSS代碼庫。這在Twitter，F(xiàn)acebook和Github等大型項目中很明顯，但其他項目通常會很快成長為“巨大的CSS文件”狀態(tài)。

OOCSS 用CSS“對象”分隔容器和內(nèi)容

SMACSS 風(fēng)格指南為您的CSS編寫CSS規(guī)則的五個類別

SUITCSS 結(jié)構(gòu)化類名和有意義的連字符

原子 將樣式分解為原子或不可分割的部分

為什么BEM比其他人更好？
無論您選擇在項目中使用哪種方法，您都將受益于更多結(jié)構(gòu)化CSS和UI的優(yōu)勢。一些風(fēng)格不那么嚴格和更靈活，而另一些則更容易理解和適應(yīng)團隊。

我選擇BEM而不采用其他方法的原因歸結(jié)為：它比其他方法（即SMACSS）更容易混淆，但仍為我們提供了我們想要的良好體系結(jié)構(gòu)（即OOCSS）以及可識別的術(shù)語。
Mark McDonnell，BEM可維護的CSS

Blocks，Element和Modifier
聽到BEM是方法論的關(guān)鍵元素 - Block，Element和Modifier的縮寫，您一定不會感到驚訝。BEM嚴格的命名規(guī)則可以在這里找到。

塊

獨立的實體，它本身是有意義的。

例子 header，container，menu，checkbox，input

元件

塊的一部分，沒有獨立的含義，并且在語義上與其塊相關(guān)聯(lián)。

例子 menu item，list item，checkbox caption，header title

修改

塊或元素上的標志。用它們來改變外觀或行為。

例子 disabled，highlighted，checked，fixed，size big，color yellow

深入理解
我們現(xiàn)在來看一個使用BEM的元素，是Github的button：

我們可以使用一個普通按鈕應(yīng)對普通情況 ，再使用兩種不同的應(yīng)對不同情況。因為我們使用BEM的方式為Block 綁定了class，我們可以用任何想使用的標簽去實現(xiàn)。（button，a 甚至是div）。但是命名規(guī)則告訴我們需要使用block-modifier-value的語法。
HTML:

    Normal button


    Success button


    Danger button

CSS:

.button {
    display: inline-block;
    border-radius: 3px;
    padding: 7px 12px;
    border: 1px solid #D5D5D5;
    background-image: linear-gradient(#EEE, #DDD);
    font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
    color: #FFF;
    background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
    border-color: #4A993E;
}
.button--state-danger {
    color: #900;
}

優(yōu)點：

單元性

塊的樣式從來不依賴同頁面其它的元素，所以你永遠不會遇到級聯(lián)問題。您還可以將完成的項目中的塊轉(zhuǎn)移到新項目中。

重用性

不同方式組織獨立的塊，并智能地重用它們，可以減少必須維護的CSS代碼量。通過一系列風(fēng)格指南，您可以構(gòu)建一個塊庫，使您的CSS超級有效。

結(jié)構(gòu)化

BEM方法可以使得你的CSS代碼結(jié)構(gòu)性很好，從而更加容易理解。

拓展閱讀
‘Why BEM?’ in a nutshell
MindBEMding — getting your head ’round BEM syntax
CSS guidelines
BEM methodology for small projects
BEM It! for Brandwatch
Used and Abused — CSS Inheritance and Our Misuse of the Cascade.
Objects in Space — A style-guide for modular SASS development using SMACSS and BEM
How to Scale and Maintain Legacy CSS with Sass and SMACSS
Building a modular My Health Skills with BEM and Sass
Building My Health Skills — Part 3

案例分析：
我們希望盡快撰寫“如何將現(xiàn)有項目遷移到BEM”。與此同時，您可以觀看Nicole Sullivan的精彩演講 - “CSS預(yù)處理器性能”。她很好地概述了她在大多數(shù)網(wǎng)站遇到的問題，并提供了跟蹤和處理這些問題的方法。

在計算機科學(xué)領(lǐng)域，只有2個非常難解決的問題：一個是緩存失效，而另一個則是命名。-Phil Karlton

有一個好的樣式指導(dǎo)手冊將會顯著提高開發(fā)的速度，debug的速度，以及在原有代碼上完成新功能的效率。然而不幸的是，大多數(shù)的CSS 代碼在開發(fā)過程中毫無任何結(jié)構(gòu)和命名的規(guī)范。從長遠角度來看，這會導(dǎo)致最后產(chǎn)生的CSS代碼庫很難維護。

BEM方法確保每一個參加了同一網(wǎng)站開發(fā)項目的人，基于一套代碼規(guī)范去開發(fā)，這樣非常有利于團隊成員理解彼此的代碼，而且對于后續(xù)接手項目的同學(xué)來說，也是一件好事。

Block

封裝一個只對自己有意義的實體。當(dāng)blocks能夠被嵌套而且彼此之間可以交互的時候，語義上他們是等價的；沒有層級關(guān)系。沒有DOM表示的整體實體。（例如控制器和模型也可以是塊）

Naming Block的名字包含拉丁字母，數(shù)字和句號。當(dāng)組合一個完整CSS class的時候，可以增加一個短的前綴：.block

HTML 任何DOM節(jié)點可以作為一個Block，只要它接受一個class名。

CSS

只使用class名選擇器

沒有標簽名和或者id

同一頁面里，不依賴其它的block或者element

例如.block {color:#042;}

Element

Block的一部分，當(dāng)把它獨立取出來時，沒有任何實際意義。任何元素在語義上都是它自己的block緊密相連的。

Naming Element的名字可能包含拉丁字母，數(shù)字，句號以及下劃線。CSS class名由block名成加兩個下劃線再加element的名字，最后組織成一個塊名。

HTML 任何的在Block中的DOM節(jié)點，都是一個element。在一個已知的block中，所有的element在語義上都是相等的。

CSS

只選擇class名字作為選擇器

沒有標簽名或者id

不依賴當(dāng)前頁面的其它block或者element

Good

.block__elem{color:#042};

Bad

.block .block__elem {color:#042;}
div.block__elem {color:#042;}

Modifier

block或者element的flag。使用他們可以改變樣式，行為或者是狀態(tài)。

Naming Modifier的名字可以包含拉丁字母，數(shù)字，句號以及下劃線。CSS的class可以由block或者element名稱后面加--組成，例如.block--mod或者.block__elem--mod，以及.block--color-black .block--color-red。復(fù)雜的modifier里由短線替代空格。

-HTML Modifier是一個額外的加在block或者element class名之后一個class 名。只為他們負責(zé)修改的blocks或者elements添加class，然后保持原有的class不變。
Good

...
...

Bad

...

CSS

使用modifier類名作為選擇器 .block--hidden { }

基于block級的modifier修改元素 .block--mod .block__elem { }

元素修改器 .block__elem--mod { }

例子：
假設(shè)你的form Block由modifier：theme:"xmas" 以及simple:true 以及element:input 和submit，submit自己的modifier是disabled:true。
HTML:

CSS:

.form {}
.form--theme-xmas {}
.form--simple {}
.form__input {}
.form__submit {}
.form__submit--disabled {}