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

便可以很清楚知道，後者為前者區塊的修飾子，兩者間關係一目了然。🕵️‍♀️

參考資料來源:
Why I use the BEM naming convention for my CSS