BEM
Block-Element-Modifier
拋棄語意式命名,改以工具功能、性質命名
命名結構
以 Block 起始
Element 接續(中間使用 2 個底線連結)
Modifier 做結(中間使用 2 個橫線連結)
block__element--modifier
1. Block
獨立存在頁面上,並可重複使用的元件
如同 SMACSS 的 Module, Layout
每個 Block 都是獨立存在
即前端框架裡的元件
例如 card 便是個好的 Block 例子
避免如 shopping-list 這類具體的名字
命名為 check-list 這類一般性的名稱,能夠在各種情況下再利用
能同時在 shopping-list 和 TODO List 裡使用
.button .b-button .text-field .b-text-field .heading .b-heading .menu .b-menu
2. Element
只存在於 Block 裡的內容
為 Block 的一部份(子組件)
無法獨立於 Block 之外
有些 Block 可能沒有 Element
例如 card__title 或 card__text、card__button
只允許一層巢狀
不可命名為 card__button__text
可將 button 定義為新的 Block
可命名為 button__text
.button__icon .text-field__label .heading__title .menu__item
3. Modifier
用來定義 Block 或 Element 的狀態或屬性
必定存在做為基底的 class
類似 SMACSS 的 State
同一個 Block 或 Element 可以允許多組 modifier 同時存在
例如 card card--featured
card 本身有 padding 和 border
card--featured 只改變背景顏色
.button_active .text-field_editable .heading_align_top .menu__item_promo
相關連結
Chainable BEM modifiers
Jordan Lewis 提出的 BEM 改寫方式
簡略為 -命名空間-值
code:html
<button class="btn -color-green -size-large"></button>
<style>
.btn {
font-size: 20px;
background-color: grey;
&.-color-green {
background-color: green;
}
&.-size-large {
font-size: 30px;
padding: 10px;
}
}
</style>
由伺服器端或 JavaScript 進行狀態修改的 class 則加上 is-