CSSのBEM仕様学習ノート
2824 ワード
ブロック（Block）
/* BEM */
.list 要素(Element)
ブロック内のサブエレメントはブロックのサブエレメントであり、サブエレメントのサブエレメントはbemでもブロックの直接サブエレメントとされている.1つのブロック内の要素のクラス名には、親ブロックの名前を接頭辞として使用する必要があります.上の例のようにli.itemはリストのサブ要素です
/* */
.list{}
.list .item{}
/* BEM */
.list{}
.list__item{}修飾子(modifier)
「修飾子」は、ブロックの特定の状態、例えば
.btn-list{}
.btn-list .btn_red{}
.btn-list .btn_green{}
.btn-list{}
.btn-list__btn_red{}
.btn-list__btn_green{}.list{}
.list.select{}
.list .item{}
.list .item.active{}
.list{}
.list_select{}
.list__item{}
.list__item_active{}書く原則.
2 セレクタネスト推薦の書き方
.xxx{}
.xxx__item{}
.xxx__item_hightlight{}
.xxx__product-name{}
.xxx__link{}
.xxx__ming-zi-ke-yi-hen-chang{}
//
.xxx__item_current{
.xxx__link{}
}意味のない_
新しい要素を新しいブロックで保存
もっと意味がある
ネーミングスペース
.l-:レイアウト.o-:オブジェクト(objects).c-:コンポーネント.js:jsのフック(JavaScript hooks).is-|.has-:ステータスクラス.t1|.s1:レイアウトサイズ(typography sizes).u-:実用クラス