首先看一下大名鼎鼎的BEM是什麼

BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團隊提出的一種前端命名方法論。這種巧妙的命名方法讓你的CSS類對其他開發者來說更加透明而且更有意義。

BEM的關鍵是可以通過名字告訴開發者這些標籤表示的是什麼意思，通過瀏覽class屬性，就能夠明白這些模組之間是如何關聯的，有一些僅僅是元件，有一些是組建的子孫或是元素，還有一些元件是其他形態或修飾符，使用這些常規的命名方式我們可以看清程式碼之間的關聯，BEM是不是很強大呢。

• 塊

       獨立的實體，它本身是有意義的。

       例子 header，container，menu，checkbox，input

• 元素

      塊的一部分，沒有獨立的含義，並且在語義上與其塊相關聯。

      例子 menu item，list item，checkbox caption，header title

• 修改

      塊或元素上的標誌。用它們來改變外觀或行為。

      例子 disabled，highlighted，checked，fixed，size big，color yellow

一起來看小清新網站堆糖BEM命名例項

一般網站的結構都是由header，content，footer三部分構成，每部分用上不同的BEM

命名，網站結構就非常清晰可見了。堆糖就用了這樣的結構

 <div id="header-wrap">    
      <div id="dt-header">
        <div id="dt-wrap">
                <a id="dt-logo" href="#">堆糖</a>
            <div id="dt-nav"></div>
            <div id="dt-search"></div>
            <div id=dt-srarch-right"></div>
        </div>
    </div>
</div>
 
複製程式碼

這裡是堆糖header部分，網站名為堆糖，可以看到這些標籤大多以dt開頭。

dt-header是指著整個堆糖的header部分

dt-wrap是header的包裹部分，這部分塊由四部分組成

• 第一部分是dt-logo，表示堆糖這個logo
  
• 第二部分dt-nav表示導航標籤
• 第三部分dt-search表示搜尋標籤
• 第四部分是一個大的塊，取名為dt-search-right

所以這些語義化的標籤使每個元素都清晰可見，這就是BEM。

讓我們看看堆糖推薦區的BEM命名

來看看堆糖是如何做的，這塊是一個推薦關注區，中間由ul列表組成 

裡面由三個section，每個section=img+desc+follow

  複製程式碼

• ul列表取名為dt-daren-list,多麼清新的名字，list修飾符表明這是一個列表
• 每個section下有不同的區塊，daren-img圖片區和daren-desc文字區和daren-follow超連結區
• 每個img下有兩個小圖示,分別命名為daren-avater和daren-avater-v

看一下小清新的一幕

 

複製程式碼

• dynamic-collect-article，命名為動態收集文章，這是一項。
  
• dynamic-collect-article-userinfo ，用修飾符userinfo表示人物資訊
  
• dynamic-collect-article-tag，用修飾符tag表示一個小標籤
  
• dynamic-collect-article-bar，用字尾修飾符bar表示底部一欄
  

這些應該都是常見的修飾符，類似還有icon ，label，badge等，還有一些對元素狀態修改用到的修飾符，-on等

看一下這部分的點贊收藏

<div class="de-action">        <div class="action-list" data-type="article" data-id="665046">            <div class="like-action one-action " data-likeid="0">                <img src="https://b-ssl.duitang.com/uploads/item/201804/23/20180423141044_kt5Rj.png">                <span class="detail-text">6</span>            </div>
            <div class="favorite-action one-action " data-favoriteid="0">                <img src="https://b-ssl.duitang.com/uploads/item/201804/23/20180423141044_YizTc.png">                <span class="detail-text">5</span>            </div>            <div class="more-action one-action">                <img src="https://b-ssl.duitang.com/uploads/item/201804/23/20180423141044_tPCeh.png">                <span class="detail-text">更多</span>            </div>        </div>    </div>             複製程式碼

這部分的程式碼

• 這部分的內容被包含在de-action的盒子中
  
• action-list是整個盒子的子盒子,由like-action和favorite-action,more-action組成
  
• like-action 點贊區
  
• favorite-action 喜歡收藏區
  
• more-action 檢視更多區
  
• 其中每塊由圖片<img>和<span classdetail-text>組成，結構清晰易懂
  

最後如何看待BEM

• BEM還是有很多值得大家去思考的，特別是用於維護專案，或者跨團隊的開發當中，他的好處會明顯見長。
• 單元性

塊的樣式從來不依賴同頁面其它的元素，所以你永遠不會遇到級聯問題。您還可以將完成的專案中的塊轉移到新專案中。

• 重用性

不同方式組織獨立的塊，並智慧地重用它們，可以減少必須維護的CSS程式碼量。通過一系列風格指南，您可以構建一個塊庫，使您的CSS超級有效。

• 結構化

BEM方法可以使得你的CSS程式碼結構性很好，從而更加容易理解。

堆糖網在此：https://www.duitang.com/