BEM 命名模式
之前看過許多關於 BEM 命名的文章,或許是當時還不了解「元件式開發」的觀念,所以一直無法領略其箇中道理,也不懂為什麼要讓 class 名稱這麼長 ?
經過八周的「網頁切版直播班」洗禮,好像更能理解了~~
而今天在查資料時發現了 Youtube 上這段影片 :
講者發下狂語要讓人五分鐘搞懂 BEM,想不到透過他的影片和舉例,真的講解得蠻清楚的呢~
看完影片後,我將影片中的講解整理成以下重點 :
1. BEM,顧名思義是由B、E、M 所組成
- B: Block 區塊
- E: Element 元素(子模組)
- M: Modifier 修飾子(樣式)
2.將範例中卡片樣式依照 BEM 分類
講者以兩張卡片元件做為例子,樣式上的差異在背景色,一張為亮色系,一張為暗色系,所以這個例子當中,如果將他們的 CSS 樣式以 BEM 去拆分:
- B: 整個卡片元件
- E: 卡片內的圖片、標題、內文
- M: 背景色: 亮色、暗色
3. 命名符號使用
- 區塊 (Block) 與區塊中的子模組 (Element) 連接,會使用到兩個下底線(underscore)。
- 與修飾子 (Modifier)連接,則會使用到兩個連字號(hyphen)。
了解 BEM 命名符號的使用後,當我們看到class名稱,便能一目了然他們之間的關係:
透過BEM的命名方式拆分 CSS 程式碼,日後需修改也較好維護。
4. BEM 搭配 SCSS 寫法
如果使用 BEM 命名法,在撰寫 CSS 時,一長串的 class 名稱常會造成很大的困擾。但如果搭配上 SCSS 寫法,將前面重複的區塊名稱用"&"符號代替,便簡單許多 :
.card {
margin 2em;
max-width: 300px;
padding: 2em;
box-shadow: 0 10px 30px -10px rgba(0,0,0,.45); &--light{
background-color: #eee;
} &--dark {
background: #333;
color: white;
}
}
最後,影片底下留言暗藏了一個小小知識,依自己的理解,翻譯成以下對話~
有觀眾問 :
BEM 的概念很棒,但為什麼 BEM 命名符號要使用 " 2 個 " 下底線及 2 個連字號,而不各使用 1 個就好? 如.card、.card_body、.card-dark ?
講者親自回應:
因為我們在區塊的命名上,有可能會使用到一個連字號來表示空格,當我們有一個命名為 .featured-content 的區塊,之後若再新增一個 .featured-content-footer,便看不出他們之間的關係,只會變成是一個很長的 class 名稱;但如果將它們改成命名為 :
.featured-content 以及 .featured-content--footer
便可以很清楚知道,後者為前者區塊的修飾子,兩者間關係一目了然。🕵️♀️