Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development

什么是BEM官边？（前端領(lǐng)域）

• BEM是Block鞋邑，Element和Modifier的簡(jiǎn)稱背捌。
• Block即塊崎坊，Element即元素，Modifier即修飾符。
• 良好的溝通是建立在相同的認(rèn)知這個(gè)基礎(chǔ)上的。所以器瘪，不要擔(dān)心看不懂BEM。接下來(lái)會(huì)對(duì)BEM的命名規(guī)則進(jìn)行說(shuō)明：

• Block(塊)：有自身意義的一個(gè)獨(dú)立的實(shí)體绘雁。舉個(gè)??：
  
  Block
  
  根據(jù)表達(dá)內(nèi)容(即自身意義上)可以劃分為：Header橡疼、Container、Footer庐舟、LOGO
  此時(shí)可以定義出以下類選擇器名稱：header欣除、container、footer挪略、logo
  至于Input 和 Button 的劃分历帚，放到??說(shuō)。
• Element(元素)：語(yǔ)義上與塊相關(guān)杠娱，但是自身沒有獨(dú)立含義的塊的一部分挽牢。接著舉??：
  
  Element
  
  紅色下滑線標(biāo)注的即為Elements，藍(lán)色的是Elements所屬的Block摊求。
  MenuItem是Menu的一部分禽拔，單獨(dú)的MenuItem沒有獨(dú)立含義。
  Containers 和 其中的Pie Graph、Image因?yàn)槎际蔷哂袑?shí)意的元素睹栖，所以都是Block硫惕。
  圖 Block中的Input 和 Button 也是Element。why野来？試想恼除，兩個(gè)元素脫離container且互相獨(dú)立開后，不難發(fā)現(xiàn)曼氛，input 和 button 就只剩下其本身的語(yǔ)義對(duì)應(yīng)功能豁辉，缺失了自身的實(shí)際意義。

• Modifier(修飾符)：塊或元素上的標(biāo)識(shí)舀患。用于標(biāo)識(shí)表現(xiàn)方式或者行為秋忙。舉??：

  
  
  Modifier
  
  

  Search塊的背景主題顏色是藍(lán)色，即可以寫作search theme blue;
  Input元素onfocus時(shí)构舟，即可以寫作input highlight;
  Button元素的處于禁用狀態(tài)時(shí)，即可以寫作button disabled堵幽。

使用BEM會(huì)有哪些好處狗超？

• 利于CSS代碼的維護(hù)，使得css結(jié)構(gòu)更更友好朴下、更有意義（熟悉規(guī)則之后）

更加官方的解釋 http://getbem.com/faq/

BEM的使用規(guī)則

• Block
  • 對(duì)象（實(shí)際的DOM）
    • 只要接收了一個(gè)類選擇器的節(jié)點(diǎn)都可以是一個(gè)Block
  • CSS中的應(yīng)用標(biāo)準(zhǔn)
    • 可以使用拉丁字母努咐，數(shù)字和破折號(hào)
    • 只使用類選擇器，意味著不能有標(biāo)簽選擇器和id選擇器
    • 同頁(yè)面中殴胧，不依賴其它的Block或者Element

HTML
<div class='block'></div>

CSS
.block{}

??和官方的示例有些出入渗稍，在我的理解中，命名方式其實(shí)可以直接合并到CSS的說(shuō)明中团滥，集合成為一個(gè)應(yīng)用時(shí)的規(guī)則

• Element
  • 作用對(duì)象
    • Block中的節(jié)點(diǎn)都可以作為Element竿屹，且這些節(jié)點(diǎn)會(huì)有相同的上下文語(yǔ)義
  • CSS中的應(yīng)用標(biāo)準(zhǔn)
    • 可以包含拉丁字母，數(shù)字灸姊、破折號(hào)和下劃線
    • 由Block的名字加上兩個(gè)下劃線再加上Element的名字組成
    • 其他規(guī)則同block中的CSS命名標(biāo)準(zhǔn)一致

HTML
<div class='block'>
...
<div class='block__elem'></div>
</div>

CSS
//good
.block__elem { color: #042; } 
//bad
.block .block__elem { color: #042; }
div.block__elem { color: #042; }

示例中出現(xiàn)了依賴于標(biāo)簽選擇器和依賴于其他Block的情況

• Modifier
  • 作用對(duì)象
    • 即可以是Block也可以是Element（目的是通過(guò)新增而不是修改原有選擇器的方式拱燃，來(lái)為Block、Element擴(kuò)展新的樣式）
  • CSS中的應(yīng)用標(biāo)準(zhǔn)
    • 由Block的名字或者Element的名字加上兩個(gè)破折號(hào)組成
    • 其他規(guī)則同Element中的CSS命名標(biāo)準(zhǔn)一致

HTML
//good
<div class="block block--mod">...</div>
<div class="block block--size-big block--shadow-yes">
  <div class='block__elem block__elem--mod'>...</div>
</div>
//bad
<div class="block--mod">...</div>

CSS
.block{}
.block--mod {}
.block__elem {}
.block__elem--mod {}
.block--size-big {}
.block--shadow-yes {}

示例中出現(xiàn)了單獨(dú)用Modifier描述標(biāo)簽的情況力惯。
根據(jù)BEM的原則block--mod 應(yīng)該是對(duì)block的補(bǔ)充碗誉。
如果想讓該Block既保持原有的樣式又能有新的樣式，只能讓
block--mod中增加block的內(nèi)容父晶，但是這樣就會(huì)導(dǎo)致哮缺，樣式之間又變的耦合了。

使用BEM小小實(shí)踐一下

場(chǎng)景

• 當(dāng)前有個(gè)頁(yè)面菜單組件甲喝，整體為白色主題尝苇，要求鼠標(biāo)點(diǎn)擊過(guò)后，菜單子項(xiàng)會(huì)有樣式變化

分析

• 菜單即為Block
• 菜單的子項(xiàng)為Elements
• 菜單有一個(gè)Modifier為 theme white
• 菜單的子項(xiàng)有一個(gè)Modifier 為 active

代碼

HTML
<div class='menu menu--theme-white'>
  <div class='menu__item'></div>
  <div class='menu__item'></div>
  <div class='menu__item'></div>
  <div class='menu__item menu__item--active'></div>
</div>

CSS
.menu {}
.menu--theme-white {}
.menu__item {}
.menu__item--active {}

結(jié)束語(yǔ)

可以看到，BEM通過(guò)描述了一個(gè)簡(jiǎn)單的命名方法茎匠，來(lái)讓代碼更加易讀格仲、易理解，讓協(xié)作更加容易诵冒。盡管可能在一個(gè)大型項(xiàng)目的引入的初期凯肋，會(huì)給人帶來(lái)CSS類名冗長(zhǎng)的印象，但是我相信最終它會(huì)通過(guò)這種明確汽馋、健壯的命名結(jié)構(gòu)證明自己的價(jià)值侮东。
至于在實(shí)際項(xiàng)目中如何選擇，還是仁者見仁智者見智豹芯。畢竟這只一個(gè)工具悄雅。

本文參考自以下

Get BEM
BEM的定義