BEM(一種前端命名方法論)

BEM是一種前端命名方法論，主要是針對CSS，意思是塊（Block）、元素（Element）、修飾符（Modifier）的簡寫。這種命名方法讓CSS便於統一團隊開發規範和方便維護。

基本介紹

• 中文名：塊元素修飾符
• 外文名：Block Element Modifier

一、概要

BEM是一種前端命名方法論，主要是針對CSS，意思是塊（Block）、元素（Element）、修飾符（Modifier）的簡寫。這種命名方法讓CSS便於統一團隊開發規範和方便維護。

BEM規定是塊和元素之間用—連線，元素和修飾符之間用_連線。

二、介紹

問題

開發一般網站時你如何組織自己的CSS樣式通常不需要過多考慮，可以寫一些CSS，甚至可能是一些SASS或Less。但是，當涉及複雜的項目時，如何組織代碼是提高效率的關鍵，另外它還會影響瀏覽器載入這些代碼所消耗的時間。

方法

有很多方法可以減少CSS占用空間，組織程式設計師之間的合作並維護大型CSS代碼庫，項目通常會迅速成長為“巨大的CSS檔案”狀態。

OOCSS

使用CSS“對象”分隔容器和內容

SMACSS

樣式指南，用於為CSS規則編寫五個類別的CSS

SUITCSS

結構化類名和有意義的連字元

Atomic

將風格分解為原子或不可分割的碎片

BEM 組成

• Block 塊
  獨立實體，獨立的意義
  
• 如：header,container,menu,checkbox,input
  
• Element 元素
  block的一部分，沒有獨立的意義。語意上和block有關係
  
• 如：menuitem,listitem,checkboxcaption,headertitl
  
• Modifier 修飾符
  block或element上的標記。使用他來改變外觀或行為
  
• 如：disabled,highlighted,checked,fixed,sizebig,coloryellow
  

示例

使用BEM中實現頁面上的一個特定元素命名，一個按鈕，兩個不同的狀態。

block--modifier-value語法：

HTML:

<button class="button">Normal button</button><button class="button button--state-success">Success button</button><button class="button button--state-danger">Danger button</button>

CSS:

.button {display: inline-block;border-radius: 3px;padding: 7px 12px;border: 1px solid #D5D5D5;background-image: linear-gradient(#EEE, #DDD);font: 700 13px/18px Helvetica, arial;}.button--state-success {color: #FFF;background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;border-color: #4A993E;}.button--state-danger {color: #900;}

優點

模組化：

塊樣式永遠不依賴於頁面上的其他元素，因此你不會遇到級聯問題。你還可以將已完成項目中的塊轉移到新項目。

可重用性：

以不同方式組合獨立塊，並智慧型地重用它們，減少了你必須維護的CSS代碼量。有了一套樣式指南，你可以構建一個塊庫，使你的CSS超級有效。