BEM - Block Element Modfier（塊元素編輯器）是一個很有用的方法，它可以幫助你創建出可以復用的前端組件和前端代碼
- 塊
- 獨立的實體，它本身是有意義的。
- 例子 header，container，menu，checkbox，input
- 元件
- 塊的一部分，沒有獨立的含義，並且在語義上與其塊相關聯。
- 例子 menu item，list item，checkbox caption，header title
- 修改
- 塊或元素上的標志。用它們來改變外觀或行為。
-
例子 disabled，highlighted，checked，fixed，size big，color yellow
優點：
- 單元性
塊的樣式從來不依賴同頁面其它的元素，所以你永遠不會遇到級聯問題。您還可以將完成的項目中的塊轉移到新項目中。 - 重用性
不同方式組織獨立的塊，並智能地重用它們，可以減少必須維護的CSS代碼量。通過一系列風格指南，您可以構建一個塊庫，使您的CSS超級有效。 - 結構化
BEM方法可以使得你的CSS代碼結構性很好，從而更加容易理解。
Block
- 封裝一個只對自己有意義的實體。當blocks能夠被嵌套而且彼此之間可以交互的時候，語義上他們是等價的；沒有層級關系。沒有DOM表示的整體實體。（例如控制器和模型也可以是塊）
- Naming Block的名字包含拉丁字母，數字和句號。當組合一個完整CSS class的時候，可以增加一個短的前綴：.block
- HTML 任何DOM節點可以作為一個Block，只要它接受一個class名。
<div class="block">...</div> - CSS
- 只使用class名選擇器
- 沒有標簽名和或者id
- 同一頁面里，不依賴其它的block或者element
- 例如
.block {color:#042;}
Element
- Block的一部分，當把它獨立取出來時，沒有任何實際意義。任何元素在語義上都是它自己的block緊密相連的。
- Naming Element的名字可能包含拉丁字母，數字，句號以及下划線。CSS class名由block名成加兩個下划線再加element的名字，最后組織成一個塊名。
- HTML 任何的在Block中的DOM節點，都是一個element。在一個已知的block中，所有的element在語義上都是相等的。
1 <div class="block"> 2 <span class="block__name"></span> 3 </div>
- CSS
- 只選擇class名字作為選擇器
- 沒有標簽名或者id
- 不依賴當前頁面的其它block或者element
Good
1 .block__elem{color:#042};
Bad
1 .block .block__elem {color:#042;} 2 div.block__elem {color:#042;}
Modifier
- block或者element的flag。使用他們可以改變樣式，行為或者是狀態。
- Naming Modifier的名字可以包含拉丁字母，數字，句號以及下划線。CSS的class可以由block或者element名稱后面加--組成，例如.block--mod或者.block__elem--mod，以及.block--color-black .block--color-red。復雜的modifier里由短線替代空格。
-HTML Modifier是一個額外的加在block或者element class名之后一個class 名。只為他們負責修改的blocks或者elements添加class，然后保持原有的class不變。
Good
1 <div class="block block--mod">...</div> 2 <div class="block block--size-big block--shadow-yes">...</div>
Bad
1 <div class="block--mod">...</div>
CSS
- 使用modifier類名作為選擇器 .block--hidden { }
- 基於block級的modifier修改元素 .block--mod .block__elem { }
- 元素修改器 .block__elem--mod { }
作者：趁你還年輕233
鏈接：https://www.jianshu.com/p/339fdb93e155
來源：簡書