iT邦幫忙

0

淺談BEM CSS

淺談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


尚未有邦友留言

立即登入留言