【CSS】BEMとは何か？Block(ブロック), Element(エレメント), Modifier(モデファイヤ)の意味や使い方を実例で解説

CSSを使っているとBEM（ベム）という言葉を耳にすることがあります。

BEMを耳にすると、Block(ブロック), Element(エレメント), Modifier(モデファイヤ)といった言葉もセットで聞こえてきます。

これらは、CSSを適用する要素の名前をとてもわかりやすくしてくれる便利なものです。このため、様々な企業で取り入れられています。

ここでは、BEMと何か？Block(ブロック), Element(エレメント), Modifier(モデファイヤ)とは何か？についてまとめています。

BEMとは何か？

BEMとは「Block Element Modifier」の略で、CSSを適用するためのクラス名（セレクタ名）の付け方を定義したものです。いわゆるセレクタ名の付け方です。

BEMという名前が指すとおり「Block（ブロック）」「Element（エレメント）」「Modifier（モデファイヤ）」の3つの機能に分けて命名していくルールです。

Yandex（ヤンデックス）というロシアの検索エンジンを開発する人たちによって使われたのが最初と言われています。

（参考）Wikipedia Block, Element, Modifier

Block, Element, Modifierとは何か？

BEMの「Block（ブロック）」「Element（エレメント）」「Modifier（モデファイヤ）」はそれぞれ、以下のように定義されています。

Block（ブロック）とは何か？

Block（ブロック）は大きな一つの塊・機能です。例えば、レビューなどの複数のタグで構成される一番外側のタグ（ラッパー）に付けるのがBlock名です。

また、ブロック名がユーザー詳細（user detail）といったように複数の単語になる場合は、ハイフンでつないで「user-detail」とします。

Block（ブロック）の例

.user-detail{
  処理
}

.c-review{
  処理
}

Element（エレメント）とは何か？

Element（エレメント）はBlockの構成要素です。例えば、レビューの中に、ユーザーアイコン、プロフィール、レーティング、コメントなどの要素があります。それぞれが一つ一つのElementとなります。

アンダーバー２つを使って「 __エレメント名 」として記述します。

Element（エレメント）の例

.user-detail__name{
  処理
}

.c-review__icon{
  処理
}

Modifier（モディファイヤ）とは何か？

Modifier（モディファイヤ）は色やサイズを変えるといった微調整をするときに指定する命名規則です。例えば、レビューの中のアイコンに赤色を適用するといった場合にModefierを使います。

ハイフン２つを使って「 –モデファイヤ名 」として記述します。

Element（エレメント）の例

.user-detail__name--black{
  処理
}

.c-review__icon--large{
  処理
}

BEMの命名規則一覧と実例

BEMの命名規則をまとめると以下のようになります。

FLOCSSにおけるBEMの仕様

BEMによる命名規則はCSSの書き方の定義の一つであるFLOCSSでも使用されています。

例えば、FLOCSSを使ってBEMの命名規則を適用すると.scssファイルは以下のような記述になります。

.c-key-visual {
  background-repeat:  no-repeat;
  background-position: center;
  background-size: cover;
  height: 340px;
  &__title{
    font-size: 36px;
    font-weight: bold;
  }
  &__lead{
    font-size: 24px;
  }
  &__title--black,
  &__lead--black {
    color: #333;
  }
}

• Block（ブロック）: c-key-visual
• Element（エレメント）: __title, __lead
• Modifier（モデファイヤ）: --black

なお、HTMLタグの例は以下のようになります。

<div class="c-key-visual">
  <img src="../images/kv.jpg">
  <p class="c-key-visual__title c-key-visual__title--black">タイトル</p>
  <p class="c-key-visual__lead">リード文</p>
</div>