謹以此文告誡自己浪費12個小時的教訓。

BEM的意思是塊(block)、元素(element)、修飾符(modifier),是由Yandex團隊提出的一種前端命名方法論。這種命名方法讓你的css類對其他開發者來說更加透明而且更有意義。在此介紹的是在原始的BEM的基礎上改進的版本。

命名約定模式如下：

.block{}

.block_element{}

.block_modifier{}

block代表更高級別的抽象或組件。

block_element代表block的後代，用於形成一個完整的block。

block_modifier代表block的不同狀態，或不同版本。

之所以使用兩個連字符和下劃線而不是一個，是為了讓你自己的塊可以用單個連字符來界定，如：
 

.sit-search{}       /*塊*/

.sit-search_field{}         /*元素*/

..sit-search--full{}         /*修飾符*/

用常規的css方式命名：

<form class="sit-search full">
       <input type="text"   class="field">
       <input type="submit"   value="search"   class="button">
</form>
       

這些類名太不精確了，不能告訴我們足夠的信息，用ＢＥＭ記號法是下面這樣：

<form class="sit-search sit-search－－full">
       <input type="text"   class="sit-search＿field">
       <input type="submit"   value="search"   class="sit-search＿button">
</form>

我們能清晰的看到有個叫．ｓｅａｒｃｈ的塊，內部是一個．ｓｉｔ－ｓｅａｒｃｈ＿ｆｉｅｌｄ並且sit-search還有另一種形態．sit-search－－full。

再舉個例子，用BEM寫的代碼：

<div  class="media">
    <img arc="logo.png" alt="Foo Corp logo"  class="media_img--rev">
    <div class="media_body">
          <h3 class="alpha">Welcome to Foo Corp</h3>
          <p class="lede">Foo Corp is the best,seriously!</p>
    </div>
</div>

這段代碼一眼就能看明白media是一個塊，而media_img--rev是加了修飾符的media_img的變體，屬於media的元素，而media_body是一個尚未被改變過的屬於media的元素。

沒必要在每個地方都用上BEM，如：

.caps{text-transform:uppercase;}

這條不屬於任何一個ＢＥＭ範疇，僅是一個單獨的樣式。

另一個沒有使用ＢＥＭ的是：

．ｓｉｔ－ｌｏｇｏ｛｝

這是一個ｌｏｇｏ，可以把它寫成ＢＥＭ格式：

．ｈｅａｄｅｒ｛｝
．ｈｅａｄｅｒ＿ｌｏｇｏ｛｝

但沒必要這麽做，這個例子中網站ｌｏｇｏ恰巧在ｈｅａｄｅｒ內部，它也有可能在側邊欄或頁腳裏，一個元素的範圍可能開始於上下文，因此要確定只在需要用到ＢＥＭ的地方才使用它。

　　　ＢＥＭ最難的部分之一是明確作用域從哪開始到哪結束，以及什麽時候使用它。隨著接觸的多了，慢慢就知道怎麽用了。ＢＥＭ是一個非常有用、強大、簡單的命名約定，以至於讓你的前端代碼更容易閱讀和理解，更容易協作、控制，更加健壯和明確而且更加嚴密。

　　ＰＳ：此文原為一大神整理而來，印象深刻，固而，想在此記錄下來。原文出處不知。

BEM命名規範