BEM記法におけるElement/Modifierの付け方メモ

ElementとModifierの付け方・順序で迷った事例があったので書き起こしておく。

BEMおさらい

Block

構成要素。ページ内で何度でもどこでも置くことが出来る独立して動作するもの。

Element

Blockに紐付いて定義される。要素内のパーツであり、Block内であれば繰り返し使用できる。

Modifier

少しだけ違うものを量産するときに用いる。
あくまで変更がかかる要素に対して付ける。

Example

Block + Element

.box__ttl

<div class="box">
    <div class="box__ttl">タイトル</div>
    <div class="box__txt">テキスト</div>
</div>

標準的な使用。本来のElementの使い方そのまま。

Block + Modifier

.box--white

<div class="box">
    <div class="box__ttl">タイトル</div>
</div>
<div class="box box--white">
    <div class="box__ttl">タイトル</div>
</div>

構成要素自体の違いを表現したい場合。
この例でいうと、boxの白背景バージョンとかを拡張してるイメージ。

Block + Element + Modifier

.box__alert--big

<div class="box">
    <div class="box__alert">標準</div>
    <div class="box__alert box__alert--big">大</div>
    <div class="box__alert box__alert--small">小</div>
</div>

Elementのバリエーションをつくる場合。
同じアラートだがサイズの違いを作っている。

Block + Element + Element

.box__alert__ttl

<div class="box">
    <div class="box__alert">
        <p class="box__alert__ttl">アラートタイトル</p>
        <p class="box__alert__txt">アラートテキスト</p>
    </div>
</div>

Elementの中で、さらに細かいパーツが分かれることが考えられる

Block + Modifier + Element

.box--white__ttl

<div class="box box--white">
    <div class="box__ttl box--white__ttl">タイトル</div>
</div>

Modifierとして拡張された要素の、パーツとして定義したい場合。
「Block + Element + Modifier」と明確に違うのは、あくまでBlockが親になっている点。
なので同時に.box--whiteが定義されているのが前提となる。

Block + Modifier + Modifier

.box--white--big

<div class="box">
    <div class="box__ttl">タイトル</div>
</div>
<div class="box box--white">
    <div class="box__ttl">タイトル</div>
</div>
<div class="box box--white--big">
    <div class="box__ttl">タイトル</div>
</div>

拡張された要素をベースに、さらに拡張したパターン。
三次創作みたいな状態。
実際の運用では非常に理解しづらくなるため、Modifierの連結は避けたほうが良さそう。

推奨

<div class="box">
    <div class="box__ttl">タイトル</div>
</div>
<div class="box box--white">
    <div class="box__ttl">タイトル</div>
</div>
<div class="box box--whiteBig">
    <div class="box__ttl">タイトル</div>
</div>

実際は連結はせずに.box--whiteBigのように別の１バリエーションとして定義した方がわかりやすい。