BEM命名規範

一直以來自己在對css命名都是比較混亂的，並沒有一個比較好的格式來命名，最近自己碰巧學習到了BEM命名規範，我想談談自己的理解以供自己來學習，同時也可以和各位大佬一起學習。
BEM是一個很有用的方法可以建立複用元件和前端程式碼
有三個特性.

易用性，使用BEM只需要使用BEM的命名規範就可以。
單元性，使用獨立的塊和CSS選擇器，可以使你的程式碼可重用和單元化。
靈活性，使用BEM後，方法和工具可以按照自己喜歡的方式去組織和配置。

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

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

塊（Block）
是一個獨立的頁面元件跟其他的塊區分開來，相當於網頁中的元件Block封裝了行為，模板，樣式和其他技術。獨立的Block可以複用，促進專案的開發。

模組與模組之間可以巢狀，可以有任意級別的嵌

<div class="header">
    <div class="logo"></div>
    <div class="search"></div>
</div>
複製程式碼

可以任意移動

  Block可以在頁面內任意的移動，也可以在頁面之間或專案之間移動。  
  Block作為獨立的實體來實現，使得在頁面上改變Block改變位置並讓其位置和外觀不改變的簡單。  
複製程式碼

可複用
一個介面可以同一個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型別的修飾符
block-name_modifier_name
block-name__element-name_modifier-name

<!--當模組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型別的修飾符
block-name_modifier-name_modifier-value
block-name__element-name_modifier-name_modifier-value

  <!--當模組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規範學習的一些理解，提供給一些也在學習BEM的菜鳥（我自己也是一個菜鳥）大家互相學習，有很多的不足之處希望大家指出。還有很多沒有學習到的東西，自己也會在未來的時間裡不斷學習來提高自己。

BEM命名規範

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

相關文章