前言
BEM 是一個為了讓 className 有更好地維護架構 CSS 設計模式，但最主要的致命缺點就是命名長度過長，可是在實際開發上非常多人都會使用到 BEM。
BEM
BEM 其實是三個單字的縮寫
- Block (區塊)
- Element (元素)
- Modifier (修飾符)
在 BEM 的設計模式下，每一個都是元件的概念去開發，舉例來講底下的 HTML 結構我們無法得知彼此之間的相依性
1
2
3
4
5
6
| <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 都是獨立存在的個體，並且有可以重複使用的元件，例如
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <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 改為以下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <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 會如何表示？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <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 下是允許有多個狀態的
1
2
3
4
5
6
| <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 其實是一個「_」
1
2
3
4
5
6
| <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 設計模式。
參考文獻