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

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

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

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

它有如下3個(gè)特性：

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

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

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

下面將從3個(gè)方面來(lái)分析BEM到底是什么？

介紹

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

命名

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

FAQ

為什么不適用語(yǔ)義化的標(biāo)簽而是直接去使用為塊元素添加CSS class呢？

我可以像button.button的方式去組合標(biāo)簽和class到同一個(gè)選擇器中嗎？

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

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

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

這對(duì)于使用遺留代碼的長(zhǎng)期項(xiàng)目也是如此（請(qǐng)參閱“如何使用Sass和SMACSS來(lái)擴(kuò)展和維護(hù)傳統(tǒng)CSS” - 一些不錯(cuò)的SMACSS和BEM混合）。

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

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

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

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

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

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

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

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

塊

獨(dú)立的實(shí)體，它本身是有意義的。

例子 header，container，menu，checkbox，input

元件

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

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

修改

塊或元素上的標(biāo)志。用它們來(lái)改變外觀或行為。

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

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

我們可以使用一個(gè)普通按鈕應(yīng)對(duì)普通情況 ，再使用兩種不同的應(yīng)對(duì)不同情況。因?yàn)槲覀兪褂肂EM的方式為Block 綁定了class，我們可以用任何想使用的標(biāo)簽去實(shí)現(xiàn)。（button，a 甚至是div）。但是命名規(guī)則告訴我們需要使用block-modifier-value的語(yǔ)法。
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)點(diǎn)：

單元性

塊的樣式從來(lái)不依賴同頁(yè)面其它的元素，所以你永遠(yuǎn)不會(huì)遇到級(jí)聯(lián)問(wèn)題。您還可以將完成的項(xiàng)目中的塊轉(zhuǎn)移到新項(xiàng)目中。

重用性

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

結(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ě)“如何將現(xiàn)有項(xiàng)目遷移到BEM”。與此同時(shí)，您可以觀看Nicole Sullivan的精彩演講 - “CSS預(yù)處理器性能”。她很好地概述了她在大多數(shù)網(wǎng)站遇到的問(wèn)題，并提供了跟蹤和處理這些問(wèn)題的方法。

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

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

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

Block

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

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

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

CSS

只使用class名選擇器

沒(méi)有標(biāo)簽名和或者id

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

例如.block {color:#042;}

Element

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

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

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

CSS

只選擇class名字作為選擇器

沒(méi)有標(biāo)簽名或者id

不依賴當(dāng)前頁(yè)面的其它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ù)字，句號(hào)以及下劃線。CSS的class可以由block或者element名稱后面加--組成，例如.block--mod或者.block__elem--mod，以及.block--color-black .block--color-red。復(fù)雜的modifier里由短線替代空格。

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

...
...

Bad

...

CSS

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

基于block級(jí)的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 {}