淺談BEM CSS-CSS設計模式與架構

前言

BEM是Block Element Modifier的縮寫，
BEM 是一種為了讓CSS Class 更好維護的命名方式，藉由不同組件的命名 讓程式碼易懂、可重用，進而有效率地開發和維護。
雖然有些人討厭他的命名方式冗長，但是便於團隊協作。只要定義好了大的框架和命名，那麼團隊其他成員基於BEM的規范進行開發，理解成本降低，而且基本不存在樣式衝突的問題。

由來

Yandex公司推出的BEM，包括了規範以及其配套構建工具。如今提到的BEM主要是指其中的規範，在BEM最新的推廣頁中，對其的描述為：

BEM是一種命名方法，能夠幫助你在前端開發中實現可複用的組件和代碼共享。

這次介紹BEM的命名方式是經過Nicolas Gallagher修改過的。

命名技術並不是原始的BEM，但卻是一個我更喜歡的改進版。無論實際使用了什麼樣的符號，它們其實都是基於同樣的BEM原則。

BEM 表示法的格式大致如下：

/* block component 區塊*/
.block {
}

/* element 元素*/
.block__element {
}

/* modifier 修飾子*/
.block__element--modifier {
}

B-Block(區塊)

網頁是由多個區塊組合自成一區
想成是網頁構成的組件

• 頁面獨立可重複使用
• 每個block可獨立存在

header, container, menu, checkbox, input

功能：
1.負責描述功能
2.不使用元素選擇器和ID選擇器
3.block裡面不應該加樣式

E-Element(元素)

命名原則：要用2個底線__隔開作為prefix
也是頁面上的區塊，但比較像是區塊的內容
例如像是一個menu裡面的還有它的組成區塊

• 為block 的子部分
• block 可以沒有element 但element不可能沒有block
  爸爸可以沒兒子，但兒子不可能沒有爸爸
  

menu__item 
list__item, 
checkbox__caption 
header__title

功能：
1.表達目的，而非狀態
2.無法獨立於父元素之外

M-Modifier (修飾符)

命名原則：在後面加上--來辨識它是修飾符

.menu__item--active
.menu__item--sucess
.menu__item--danger

功能：
1.同一個Block或Element可以允許多組Modifier
2.用來定義區塊或是元素的屬性或狀態

一個完整頁面組成如下圖：
綠色：block
青色：element
紅色：modifier

並不是所有的css命名方式都要，遵照如此模式，只是我們應該要有具備良好的css架構概念如以下：
1.可預測
2.可重覆使用
3.可延展
4.可維護

而且當某些css設定可重複使用時，我們就應該獨立出來，讓他可以被重複使用。類似如
clearfix{clear:both}

.caps { 
    text-transform: uppercase; 
} 

這條CSS不屬於任何一個BEM範疇，它僅僅只是一條單獨的樣式。

使用BEM的訣竅是，你要知道什麼時候哪些東西是應該寫成BEM格式的。因為某些東西確實是位於一個塊的內部，但這並不意味它就是BEM中所說的元素。

結論

很多情境都不是絕對的，如果太過於堅持這些地方的話，反而會變成干擾排版的障礙，畢竟本來原意就是希望好管理css 專案

程式碼連結 & 圖片來源
Get BEM
BEM 設計模式
MindBEMding – getting your head ’round BEM syntax