-
BEM
（一種前端命名方法論）
鎖定
BEM是一種前端命名方法論，主要是針對CSS，意思是塊（Block）、元素（Element）、修飾符（Modifier）的簡寫。這種命名方法讓CSS便於統一團隊開發規範和方便維護。
- 中文名
- 塊元素修飾符
- 外文名
- Block Element Modifier
BEM一、概要
BEM規定是塊和元素之間用—連接，元素和修飾符之間用_連接。
BEM二、介紹
BEM問題
開發一般網站時你如何組織自己的CSS樣式通常不需要過多考慮，可以寫一些CSS，甚至可能是一些SASS或Less。但是，當涉及複雜的項目時，如何組織代碼是提高效率的關鍵，另外它還會影響瀏覽器加載這些代碼所消耗的時間。
BEM方法
OOCSS
使用CSS“對象”分隔容器和內容
SMACSS
SUITCSS
結構化類名和有意義的連字符
Atomic
將風格分解為原子或不可分割的碎片
BEMBEM 組成
- Block 塊獨立實體，獨立的意義
- 如：header,container,menu,checkbox,input
- Element 元素block的一部分，沒有獨立的意義。語意上和block有關係
- 如：menuitem,listitem,checkboxcaption,headertitl
- Modifier 修飾符block或element上的標記。使用他來改變外觀或行為
- 如：disabled,highlighted,checked,fixed,sizebig,coloryellow
BEM
BEM示例
使用BEM中實現頁面上的一個特定元素命名，一個按鈕，兩個不同的狀態。
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;
}
BEM優點
模塊化：
塊樣式永遠不依賴於頁面上的其他元素，因此你不會遇到級聯問題。你 還可以將已完成項目中的塊轉移到新項目。
可重用性：
以不同方式組合獨立塊，並智能地重用它們，減少了你必須維護的CSS代碼量。 有了一套樣式指南，你可以構建一個塊庫，使你的CSS超級有效。
