すべての要素をBlock / Element / Modifierの概念に切って設計する概念。
Element: アンダーバー２つ __element
Modifier: ハイフン２つ --modifier
Block Element Modifierの概念が掴みづらい。
和訳
Block : 石や木の塊
Element : 全体の中で必要な要素、成分、構成部分
Modifier : 修飾語句(color-green / action-activeなどkeyとvalueで記述)
基本文法は、
「XXのZZのYY」
XX : Block
YY : Element
ZZ : Modifier
例文
-
[ユーザー]の[大きい][アイコン]
user__icon--size-big -
[テーブル]の[タイトル]
table__title -
[本のテーブル]の[ラベル]
book-table__label -
[本の売り上げチャートの][緑の][バー]
book-sales-chart__bar--color-green -
[テーブル]の[四角い][ボタン]
table__button--shape-square -
[著者の詳細情報のボックス]の[枠]
author-detail-box__frame -
[調査結果]の[トータルスコア]
survey-result--info-total-score