BEM
Block-Element-Modifier
拋棄語意式命名，改以工具功能、性質命名
命名結構
以Block起始
Element接續（中間使用2個底線連結）
Modifier做結（中間使用2個橫線連結）
block__element--modifier
1. Block
獨立存在頁面上，並可重複使用的元件
每個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-