什麼是 BEM
BEM 是 Block Element Modifier 的縮寫，一種「前端命名規範」，為了讓 CSS Class 更好維護的命名方式，將用戶界面劃分為各種獨立的模塊（Block），藉由不同組件的命名讓程式碼易懂、可重用，進而有效率地開發和維護。
- 優點：具獨立性與複用性
- 缺點：命名長度過長。
由Yandex 公司推出的，包括了規範以及其配套構建工具。如今提到的 BEM 主要是指其中的規範，在 BEM 最新的推廣頁中，對其的描述為：
BEM 是一種命名方法，能夠幫助你在前端開發中實現可複用的組件和代碼共享。
官方網址: http://getbem.com/
一、BEM 組成介紹
1. Block
Block 意為網頁畫面中看到的多個不同的區塊，例如：選單、搜尋……等，其特性有：
- 具有獨立性：可在開發中重複利用，降低程式碼的複寫率，提升開發速度。
- 使用彈性高：可以放在頁面上任一位置，也可以互相嵌入。
1-1. 選擇器的特色和命名
- Block name 描述他的功能、區塊的目的，而非狀態。
1
header, container, menu, checkbox, input
- 不會添加樣式在裡面(例如：color, margin……等)。
- 使用BEM的同時，不會使用 CSS 標籤選擇器和 ID 選擇器。
- 命名方式：為單一單字
block或使用1個破折號來連接過長的單字block-name。
1-2. 嵌入
- Block 和 Block 之間可以彼此嵌入。
- 可以有任意級別的嵌入層次。
1
2
3
4
5
6
7
8<!-- `header` block -->
<header class="header">
<!-- 嵌套 `logo` block -->
<div class="logo"></div>
<!-- 嵌套 `search-form` block -->
<form class="search-form"></form>
</header>
2. Element
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
Ｍ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 實體的行為和樣式，就不需要重複的程式碼，如同積木般可以有不同的排列組合，每一次重新組合都是一種創新與發現。
1 | <!-- `header` block --> |
在上述的範例中，結合 blocksearch-form和 Elementheader__search-form。
如此一來，便可允許我們在 Element:header__search-form中設置額外的形狀和定位。而 search-form 本身並無受到影響，因此我們還是可以在其他頁面位置使用該 Block。這就展現 BEM 的核心邏輯─「獨立性與複用性」。
在傳統命名方式中，我们經常使用套的方式為 .header .search-form 對局部樣式進行調整，但這樣做會改變選擇器的權重。而在 BEM 的思維，保持選擇器並列和低權重是必須遵守的準則。
三、文件撰寫
也可依 BEM 中採用的組件方式來撰寫文件。
- 一個單獨的 Block 對應 一個單獨的目錄。
- Element 目錄的名稱以2個底線
__開始。 - Modifier 目錄的名稱以2個破折號
--開始。 - Element 和 Modifier 的同樣可各自擁有不同的文件。
1 | search-form/ |
我們不一定要遵循 BEM 建議的文件架構，也可以使用任何可替代的架構，只要根據 BEM 原則來組織我們的文件結構，以下有另外兩種架構方式供參考：
- Flat：https://en.bem.info/methodology/filestructure/#flat
- Flex：https://en.bem.info/methodology/filestructure/#flex
四、例外命名情況
並非所有的 CSS 命名方式都要如此，當某些 CSS 設定可重複使用時，就可以獨立出來，讓該設定被重複使用。例如：
1 | .clearfix{ |
這條 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 的開發與管理，加速了解專案的架構與增加閱讀性，如此一來便協助了工程師在開發上更有效率！