---
# System prepended metadata
title: BEM CSS 的認識與了解
tags: [CSS]
---
# 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 描述他的功能、區塊的目的，而非狀態。
```css
header, container, menu, checkbox, input
```
- 不會添加樣式在裡面(例如：color, margin......等)。
- 使用BEM的同時，不會使用 CSS 標籤選擇器和 ID 選擇器。
- 命名方式：為單一單字`block`或使用1個破折號來連接過長的單字`block-name`。
#### 1-2. 嵌入
- Block 和 Block 之間可以彼此嵌入。
- 可以有任意級別的嵌入層次。
```htmlmixed=
```
### 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 實體的行為和樣式，就不需要重複的程式碼，如同積木般可以有不同的排列組合，每一次重新組合都是一種創新與發現。
```htmlmixed=
```
在上述的範例中，結合 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)