# BEM CSS 的認識與了解
###### tags: `CSS`

[TOC]

---

## 什麼是 BEM
BEM 是 `Block` `Element` `Modifier` 的縮寫，一種「**前端命名規範**」，為了讓 CSS Class 更好維護的命名方式，將用戶界面劃分為各種獨立的**模塊（Block）**，藉由不同組件的命名讓程式碼易懂、可重用，進而有效率地開發和維護。

- 優點：具獨立性與複用性
- 缺點：命名長度過長。

由Yandex 公司推出的，包括了規範以及其配套構建工具。如今提到的 BEM 主要是指其中的規範，在 BEM 最新的推廣頁中，對其的描述為：

> BEM 是一種命名方法，能夠幫助你在前端開發中實現可複用的組件和代碼共享。

官方網址: http://getbem.com/

## 一、BEM 組成介紹
### 1. Block
>
>圖片來源：https://en.bem.info/methodology/key-concepts/

**Block** 意為網頁畫面中看到的多個不同的區塊，例如：選單、搜尋......等，其特性有：
- 具有獨立性：可在開發中重複利用，降低程式碼的複寫率，提升開發速度。
- 使用彈性高：可以放在頁面上任一位置，也可以互相嵌入。

#### 1-1. 選擇器的特色和命名
- Block name 描述他的功能、區塊的目的，而非狀態。

   header, container, menu, checkbox, input

- 不會添加樣式在裡面(例如：color, margin......等)。
- 使用BEM的同時，不會使用 CSS 標籤選擇器和 ID 選擇器。
- 命名方式：為單一單字`block`或使用1個破折號來連接過長的單字`block-name`。

#### 1-2. 嵌入
- Block 和 Block 之間可以彼此嵌入。
- 可以有任意級別的嵌入層次。

<!-- `header` block -->
<header class="header">
   <!-- 嵌套 `logo` block -->
   <div class="logo"></div>

   <!-- 嵌套 `search-form` block -->
   <form class="search-form"></form>
</header>

### 2. Element
>
> 圖片來源：https://en.bem.info/methodology/key-concepts/

**Element** 是 Block 中的组成成分。Element 不能脫離 Block 單獨使用。
- Element 是 Block 中的组成成分。
- Element 不能脫離 Block 單獨使用；但 Block 可以沒有 Element。

#### 2-1. 選擇器的特色和命名

- Element name 如同 Block name 描述的是目的而非狀態。
- 命名的完整結構是`block-name__element-name`。
- 命名方式：使用2個下底線`__`與 Block name 名稱分隔。

### 3. Ｍodifier
>
>圖片來源：https://en.bem.info/methodology/key-concepts/

**Ｍodifier name** 定義了 Block 或 Element 的外觀，狀態或行為的實體。
- 外觀：例如尺寸或主題`size-xl`, `theme-light`。
- 狀態：與通常狀態有什麼不同，`disabled`, `focused`。
- 行為：對該元素產生什麼影響，`right-bottom`。

#### 3-1. 選擇器的特色和命名
- 同一個 Block name 或 Element name 可以允許多組 Modifier name。
- 命名方式：2個破摺號`--`與 Block name 或 Element name 分隔`block-name__element--modifier`。
- 原本的命名方式為1個底線 `_`，但因為閱讀性低而改良為現在的方式。

## 二、Mix 混搭使用
結合多個 BEM 實體的行為和樣式，就不需要重複的程式碼，如同積木般可以有不同的排列組合，每一次重新組合都是一種創新與發現。

<!-- `header` block -->
<div class="header">
   <!--
       block:`search-form`混合在 block:`header`內的 element:`search-form`
    -->
   <div class="search-form header__search-form"></div>
</div>

在上述的範例中，結合 block`search-form`和 Element`header__search-form`。

如此一來，便可允許我們在 Element:`header__search-form`中設置額外的形狀和定位。而 `search-form` 本身並無受到影響，因此我們還是可以在其他頁面位置使用該　Block。這就展現 BEM 的核心邏輯─「獨立性與複用性」。

在傳統命名方式中，我们經常使用套的方式為 `.header .search-form` 對局部樣式進行調整，但這樣做會改變選擇器的權重。而在 BEM 的思維，保持選擇器並列和低權重是必須遵守的準則。

## 三、文件撰寫
也可依 BEM 中採用的組件方式來撰寫文件。

* 一個單獨的 Block 對應 一個單獨的目錄。
* Element 目錄的名稱以2個底線 `__` 開始。
* Modifier 目錄的名稱以2個破折號 `--` 開始。
* Element 和 Modifier 的同樣可各自擁有不同的文件。

search-form/         

   __input/                                     
       search-form__input.css
       search-form__input.js
       
   __button/                          
       search-form__button.css
       search-form__button.js
       
   --theme/                           
       search-form_theme_islands.css  search-form block
       search-form_theme_lite.css    

   search-form.css                   
   search-form.js

我們不一定要遵循 BEM 建議的文件架構，也可以使用任何可替代的架構，只要根據 BEM 原則來組織我們的文件結構，以下有另外兩種架構方式供參考：

- Flat：https://en.bem.info/methodology/filestructure/#flat
- Flex：https://en.bem.info/methodology/filestructure/#flex

## 四、例外命名情況
並非所有的 CSS 命名方式都要如此，當某些 CSS 設定可重複使用時，就可以獨立出來，讓該設定被重複使用。例如：

.clearfix{
    clear:both
}
.caps { 
    text-transform: uppercase; 
} 

> 這條 CSS 不屬於任何一個 BEM 範疇，它僅僅只是一條單獨的樣式。

## 結論
**一、命名方式整理：**
* Block：block 或 block-name
* __Element：__element 或 __element-name
* --Ｍodifier:--modifier 或 --modifier-name

整體結構：`block-name__element-name--modifier-name`

**二、與 OOCSS 不同的是：**
- BEM 是一種命名規範。
- OOCSS是CSS的設計思想。事實上 BEM 也用到了 OOCSS 的思想。

**三、**
在許多情境下，命名方式都不是絕對的，依照不同的情況來做彈性的調正，而非墨守成規。近幾年前端框架 Boostarp, Tailwind 流行起來，大多數人較習慣 OOCSS 的命名方式，筆者也是一樣的，但還是有人在寫 BEM。

而無論是 BEM, OOCSS 的發明，都可以幫助 CSS 的開發與管理，加速了解專案的架構與增加閱讀性，如此一來便協助了工程師在開發上更有效率！

## 參考資料
[BEM 規範思維 – 讓 CSS 更利於開發與維護](https://www.astralweb.com.tw/apply-bem-to-css-coding-and-maintenance-2/)
[淺談 BEM CSS - CSS 設計模式與架構](https://w3c.hexschool.com/blog/35afa83f)