「イマドキCSS設計」の解説 – 中編：BEMについて

こんにちは！basara669です。

勉強会で使った「イマドキCSS設計」の資料の解説の第2回目で、BEMについて書きました。

他の記事はこちら

• 「イマドキCSS設計」の解説 – 前編：css設計の必要性

BEMとは

BEMとはロシアのYandexという会社が作った設計のための指針というか、方法論です。

フロントエンド全般の内容になっていて、CSS以外のこともかいてありますが、今回はCSSだけにフォーカスします。

BEMの基本概念

BEMとは、Block、Element、Modifierの頭文字をとったもの

BEMの基本概念としては下記のような基本概念のもと作られています。

• メンテナンス性の向上
• 共同作業
• コードの再利用性

先ほど説明したとおり、ただ、CSSを書いていってしまうと非常にメンテナンス性が悪いです。結局追記を繰り返し破綻をします。

また、コーディング規約などがあっても、不明確なclassなどがったりします。そして、うまく適用できない場合HTMLに新たなdivを追加し、classを追加し、無駄なCSSが増えることになってしいます。

このようなことが起こらないように、「共同作業」や「コードの再利用性」を非常に意識した作りになっています。

BlockとElement、Modifierを順番に解説していきます。

Blockとは

Webページを機能ではなく、要素ごとで区切ります。

この細かい要素が積み重なって、Webサイトは出来ていると言えます。

この要素をBlockと呼びます。

このBlockの1つである、メニューを見てみます。

これだけだとそれほどこれまでと大きく変わらないマークアップになっているのではないでしょうか？

ただ、Blockにもちょっとしたルールがあります。それは

• Blockは独立して動く必要がある
• Blockの中にBlockを存在するのはOK
• ただし、CSS上はBlockを入れ子にするのはNG

BlockはBlockだけで独立して動く必要がありますが、独立して動けば良いので、Blockの中にBlockを設置するのはOKです。

しかし、これまで機能ごとで書いていた場合、.headerなどにこのmenuを書いてしまっていたかもしれませんが、そうすると.headerに依存してしまうのでNGです。

.menuは独立するように書くようにします。

Elementとは

次にElementですが、これにも書く時のルールがあります。

• Elementには必ず所属するBlock名記述する
• “__”でつなぐ
• Blockの範囲がわかりやすい。

class名は長くなりますが、Elementに所属するBlockを書くことで、どのBlockの要素かわかりやすくなります。
BEMでは”__”（アンダーバー2個）でつなぐことになっています。

先ほどのメニューであらわすとメニューの中にある1つ1つのリストがElementになります。

この部分のマークアップはこのような感じになります。

このコードの場合は”menu”の要素の1つなので、”menu__item”と書きました。

Modifierとは

Modifierとはメニューの中で1つ色が変わっている部分があると思いますが、この部分を表現するときに使います。

ModifierにもBlockなどと同じように書き方のルールがあります。

• Blockに対するModifierと、Elementに対するModifierがある
• 接頭語に所属する場所を記述する
• “_”1つでつなぐ
• key_value形式で書く

Modifierは、Block自身に何か変化があれば、Blockにつけることもできますし、今回のメニューのように、Elementに対するModifierもあり得ます。

Modifierも何のModifierなのかが理解出来るために、所属する場所を記述します。記述方法ですが、”_”1つで、key・value形式で書きます。

このルールを使って、先程から使っているメニューの例でマークアップしてみるとこんな感じです。

menuのBlockのElementである”menu__item”の要素のModifierなので、”menu__item_state_current”としています。
非常に長いclass名ですが、こうすることで、何のModifierか一目瞭然です。また、key・value形式で書くことで何の時に発動するModifierなのかもわかりやすいです。

補足：BEMのセパレータまとめ

“__”などをセパレータと呼ぶのですが、下記のようなパターンがあります。

• Blockの区切りは”__”
• Modifierの区切りは”_”key・value形式で書く
• 単語の区切りは”-“

BEMの書き方は守らなくてはいけないか？

このセパレータが合わない方が多いというのをよく見かけるのですが、独自のルールでOKだと思います。
大切なのはチーム内で共通の書き方になっていればいいと思うので、独自のルールで全然OKです。

私も単語区切りはキャメルケース（main-viewではなく、mainViewなど）で書いてます。
ただ、少し書いてみて思ったのが、”__”は良かったです。

というのも、こういう書き方は普段しないので、今書こうとしているものは本当にこのBlockのElementでいいのかな？とか軽く逡巡するようになって、Blockという概念を意識するようになりました。

ここまで読んでいただいた皆様、ありがとうございます！！

また、また長くなってしまったのでここで切ります。
次回が最終回でBEMの具体例を少し書いて、SMACSSを軽く紹介し、どの様に運用していくと良いかについて書きます。