一篇關於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規範學習的一些理解，大家互相學習，有很多的不足之處希望大家指出。還有很多沒有學習到的東西，自己也會在未來的時間裏不斷學習來提高自己。