BEMを採用
| 説明 | 命名ルール | 命名ルールの補足 | |
| Block | それ単体で独立した１つのコンポーネントとなるもの。どこでも再利用できるように機能を持たせる。Blockの中に別のBlockを含めることができる。 | Block | Blockの内容に沿ったをつければ良い |
| Element | 特定の親Blockの中でのみ使用できる部品であり、Element単体では使用できない。 | Block__Element | 所属する親Blockの名前に続けてアンダースコア2つの後にElementの名前をつける |
| Modifier | BlockやElementのバージョン違い。選択されている、開いている、といったコンポーネントの状態を表現したい場合。 | Block__Modifier Block__Element–Modifier | ハイフン２つの後にModifierの名前をつける |
※class名が2単語の場合は単語の区切りにハイフン１つ（ケバブケース）を使うものとする
例
- global-nav__item
- menu__list
- blog-news__list
- blog-news__list__items
- menu__list__espresso
classが長くなる場合はModifierだけ単体class運用もOKとする
BEM法の場合、クラス名が長くなるというデメリットがあるため、回避策としてModifierのみ単体classを使っても良いとする。
例
- btn–white hover06
- shoplist wrap-pa
- result-pickup__comment _primary
その他念頭に置いておくこと
重要なのは定義したルールが全体を通して一貫していること。
コーディングの流れの中で早めに、どれがBlockなのかどれがElement、Modiferなのか仕分けすることが大事。
コメント