CSS BEM命名

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。

<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>