一篇關於BEM命名規範

一直以來本身對命名都是比較混亂的，並無一個比較好的格式來命名，最近本身碰巧學習到了BEM命名規範，我想談談本身的理解以供本身來學習，同時也能夠和各位大佬一塊兒學習。
BEM是一個頗有用的方法能夠建立複用組件和前端代碼
有三個特性.

1. 易用性，使用BEM只須要使用BEM的命名規範就能夠。
2. 單元性，使用獨立的塊和CSS選擇器，可使你的代碼可重用和單元化。
3. 靈活性，使用BEM後，方法和工具能夠按照本身喜歡的方式去組織和配置。

   BEM的簡介
   BEM是一個強大而簡單的命名規範，使得代碼更容易讓人理解，容易和他人協做，容易擴展，更增強壯和明確，最重要的是嚴謹性。
   BEM的命名規範可讓參與網站開發的人都使用同一個代碼庫使用用一種方法。

BEM分別是塊（Block），元素（Element），修飾符（Modifier）

• 塊（Block）
  是一個獨立的頁面組件跟其餘的塊區分開來，至關於網頁中的組件Block封裝了行爲，模板，樣式和其餘技術。獨立的Block能夠複用，促進項目的開發。

  1. 模塊與模塊之間能夠嵌套，能夠有任意級別的嵌

     ``` <div class="header"> <div class="logo"></div> <div class="search"></div> </div> ```
  2. 能夠任意移動

>>
    Block能夠在頁面內任意的移動，也能夠在頁面之間或項目之間移動。  
    Block做爲獨立的實體來實現，使得在頁面上改變Block改變位置並讓其位置和外觀不改變的簡單。  
3. 可複用  
    一個界面能夠同一個Block的幾個實例

• 元素（Element）
  元素是模塊Block的重要組成部分，且不能脫離模塊單獨的使用

  ``` 元素的名稱用來描述它的目的 一個完整的元素結構block-name__element-name,塊名和元素名使用（__）雙下劃線分割。 ```
  • 元素之間是能夠嵌套的
  • 能夠擁有任意級別的嵌套
  • 一個元素老是模塊Block的一部分這意味着元素名稱不能爲block__element__element這種結構，而block__element這種結構纔是正確的。
  ``` <div class="weui-tabbar"> <div class="weui-tabbar__item"> <span> <img src=" " alt="" class="weui-tabbar__icon"> </span> <p class="weui-tabbar__label"></p> </div> </div> ```

-能夠在不改變元素的狀況下改變DOM結構

<div class="weui-tabbar">
<div href="#" class="weui-tabbar__item">
<span>
<img src=" " alt="" class="weui-tabbar__icon">
</span>
</div>
<p class="weui-tabbar__label"></p>
</div>

-一個元素老是模塊的一部分，不能單獨的使用。以下weui-tabbar模塊裏面的p標籤元素放在模塊外，這是不正確的。

<div class="weui-tabbar">
<div class="weui-tabbar__item">
<span>
<img src=" " alt="" class="weui-tabbar__icon">
</span>
</div>
</div>
<p class="weui-tabbar__label"></p>

-元素是可選擇的，不是全部模塊都必須擁有元素

• 修飾符（Modifier）
  Modifier是BEM的一個實體，它定義了block或element的行爲或外觀
  Modifier可用可不用
  Modifier本質和html的屬性很類似，同一個block會由於使用Modifier而與以前看起來不同。
  -修飾符的名字與模塊和元素的名字使用（_）單下劃線
  命名模式遵循以下格式:

  • Boolean類型的修飾符
    <font color=green>block-name_modifier--name</font>
    <font color=green>block-name__element-name--modifier-name</font>

    ``` <!--當模塊weui-tabbar有一個focused的boolean類型的修飾符時--> <div class="weui-tabbar weui-tabbar--focused"> 當元素weui-tabbar__item有一個on類型的修飾符時 <div class="weui-tabbar__item weui-tabbar__item--on"> </div> </div> ```
    • key-value類型的修飾符

<font color=green>block-name--modifier-name--modifier-value</font>  
<font color=green>block-name__element-name--modifier-name--modifier-value</font>

<!--當模塊weui-tabbar有一個值爲yes的test的修飾符時-->
<div class="weui-tabbar weui-tabbar--test--yes">
當元素weui-tabbar__item有一個yes的test的修飾符時
<div class="weui-tabbar__item weui-tabbar__item--test--yes">
</div>
</div>

>-一個修飾符不能單獨的使用
>>一個修飾符不能脫離模塊或元素單獨的使用，一個修飾符應該改變一個實體的外觀，行爲或者狀態，而不是替換它。

<!--正確的方法-->
<div class="weui-tabbar">
<div class="weui-tabbar__item weui-tabbar__item--on">
</div>
<!--錯誤的使用-->
<div class="weui-tabbar">
<div class="weui-tabbar__item--on">
</div>

以上是我通過對BEM規範學習的一些理解，你們互相學習，有不少的不足之處但願你們指出。還有不少沒有學習到的東西，本身也會在將來的時間裏不斷學習來提升本身。

原文地址：http://www.javashuo.com/article/p-cxnwrfdg-gk.html