BEM Block Element Modifier 區塊元素修飾 官網
Block - 任何DOM node 都可以是block。
CSS: 只用class name selector。不使用 tag name和ids。
W3C 區塊元素
Element - Block內的元素
block name__element name
中間是兩個底線
Modifier 標示blocks或elements其改變外觀、狀態
block name__element name--mod
由2個dashes接修飾名稱
有加modifier class name 的DOM node,也要保留原本的class name。
Monday | Tuesday | Wednesday |
---|---|---|
boxing | learning | shopping |
<table>
<thead>
<tr class="table__header table__row">
<th class="table__cell table__cell--monday">Monday</th>
<th class="table__cell table__cell--tuesday">Tuesday</th>
<th class="table__cell table__cell--wednesday">Wednesday</th>
</tr>
</thead>
<tbody>
<tr class="table__header table__row">
<td class="table__cell table__cell--boxing">boxing</td>
<td class="table__cell table__cell--learning">learning</td>
<td class="table__cell table__cell--shopping">shopping</td>
</tr>
</tbody>
</table>