CSS 設計模式 - BEM

簡介

  • CSS 寫法自由度高，難以維護
  • 例如 Class 的命名就可以讓人一個頭兩個大
  • 在大型專案或多人協作時，需要有一套規範讓團隊遵守，提升開發效率

BEM 是什麼

  • CSS 命名 class 的一種規範
  • 以元件的概念來命名
  • 語義化，開發時能從 HTML 結構就能看出階層關係
  • 讓 CSS 結構更為清晰，更好維護
  • 不推薦使用 html 標籤和 id 撰寫 CSS 樣式

BEM 名稱來源

1. Block 區塊

  • 在頁面上獨立存在，可重複使用的元件
  • ex: header, footer, menu, card

2. Element 元素

  • _ _ 雙底線：用來連接 Block 和 Element
  • Block 的子元件，無法存在 Block 之外
  • ex: menu__item, list__item

3. Modifier 修飾符號

  • -- 用雙中線來連接
  • 定義 Block / Element 的狀態或屬性
  • 應該改變的是實體的外觀，行為或狀態，而不是替換它
  • ex: disabled, checked, fixed, size big, color yellow

範例：卡片元件

note-img

命名範例

*一般的命名方式

note-img

*使用 BEM 命名

note-img

搭配 SCSS 寫法 (推薦)

  • 解決命名太長的困擾
  • 前面重複的區塊名稱可以簡寫成&
  • 修改 class 名稱更簡單

範例

note-img

常見問題：

Element 的子元素命名

  • 當有一個巢狀超過兩層的元素需命名時
    錯誤範例 ⬇
<nav class="menu">  <ul class="menu__list">    <li class="menu__list__item">      <a class="menu__list__item__link"></a>    </li>    <li class="menu__list__item">      <a class="menu__list__item__link"></a>    </li>  </ul></nav>
  • 不需要在 class 名稱中完整呈現 HTML 結構
  • 命名只是用來提示元素與 block（最外層元件）之間的關係
    應該寫成 ⬇
<nav class="menu">  <ul class="menu__list">    <li class="menu__item">      <a class="menu__link"></a>    </li>    <li class="menu__item">      <a class="menu__link"></a>    </li>  </ul></nav>

參考文章 / 影片

# CSS # SCSS # BEM