淺談 CSS 設計模式系列-BEM 篇

前言

BEM 是一個為了讓 className 有更好地維護架構 CSS 設計模式，但最主要的致命缺點就是命名長度過長，可是在實際開發上非常多人都會使用到 BEM。

BEM

BEM 其實是三個單字的縮寫

• Block (區塊)
• Element (元素)
• Modifier (修飾符)

在 BEM 的設計模式下，每一個都是元件的概念去開發，舉例來講底下的 HTML 結構我們無法得知彼此之間的相依性

<header class="header">
  <ul class="main">
    <li class="item"></li>
    <li class="item active"></li>
  </ul>
</header>

我們無法得知 .main、.item 是否只存在於 header 並且有可能其他地方會使用到 .main、.item 的名稱，那麼就會發生衝突，因此 BEM 的設計模式就會顯得非常易讀且確保相依性。

Block (區塊)

Block 簡單來講在上述範例中第一層 class="header" 就是屬於一個 Block，簡單來講每一個 Block 都是獨立存在的個體，並且有可以重複使用的元件，例如

<header class="header">
  <ul class="main">
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</header>
<section class="cart">
  <ul class="main">
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</section>
<section class="order">
  <ul class="main">
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</section>

在上述範例中就有三個 Block 分別為 .header、.cart、.order。

當然 BEM 的設計原則是為了讓 class 更好，因此也會有可能出現 prefix(前綴詞)變成 .b-header、.b-cart、.b-order。

Element (元素)

Element 則是 Block 的子元件(兒子概念)，並且他無法獨立於 Block 之外，但有些 Block 可能會沒有 Element。

因此在上面的範例中，我們可以將 .main、item 改為以下

<header class="header">
  <ul class="header__main">
    <li class="header__main__item"></li>
    <li class="header__main__item"></li>
  </ul>
</header>
<section class="cart">
  <ul class="cart__main">
    <li class="cart__main__item"></li>
    <li class="cart__main__item"></li>
  </ul>
</section>
<section class="order">
  <ul class="order__main">
    <li class="order__main__item"></li>
    <li class="order__main__item"></li>
  </ul>
</section>

Element 的標示方式是兩個下底線「__」，主要是第一個為 block 然後使用「__」當作前綴詞表示接下來的是 Element，因此你有可能看到非常長的 Element。

Modifier (修飾符)

Modifier 簡單來講就是狀態的意思，主要是使用 「--」 去代表 Modifier，舉例來講在上述範例中如果 li 有一個選取的狀態 .active 那麼 BEM 會如何表示？

<header class="header">
  <ul class="header__main">
    <li class="header__main__item header__main__item--active"></li>
    <li class="header__main__item"></li>
  </ul>
</header>
<section class="cart">
  <ul class="cart__main">
    <li class="cart__main__item"></li>
    <li class="cart__main__item cart__main__item--active"></li>
  </ul>
</section>
<section class="order">
  <ul class="order__main">
    <li class="order__main__item order__main__item--active"></li>
    <li class="order__main__item"></li>
  </ul>
</section>

甚至在 Modifier 下是允許有多個狀態的

<section class="order">
  <ul class="order__main">
    <li class="order__main__item order__main__item--active order__main__item--danger"></li>
    <li class="order__main__item"></li>
  </ul>
</section>

最後直得一提的是，早期的 BEM Modifier 其實是一個「_」

<section class="order">
  <ul class="order__main">
    <li class="order__main__item order__main__item_active order__main__item_danger"></li>
    <li class="order__main__item"></li>
  </ul>
</section>

是後來發現這樣子的可讀性較低，因此才改了雙「--」，所以其實我們現階段所使用的 BEM 都是改良過得 BEM 設計模式。

參考文獻

• get BEM
• Sass教學 (33) - BEM 設計模式
• 漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例