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

こんにちは!basara669です。

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

他の記事はこちら

BEMとは

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

Main / BEM

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

BEMの基本概念

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

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

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

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

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

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

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

Blockとは

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

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

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

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

<div class="menu">
		<ul>
			<li class="menu__item">ホーム</li>
			<li class="menu__item">企業情報</li>
			<li class="menu__item">個人のお客様</li>
			<li class="menu__item">法人のお客様</li>
			<li class="menu__item">プレスリリース</li>
			<li class="menu__item">採用情報</li>
		</ul>
	</div>

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

ただ、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になります。

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

<div class="menu">
		<ul>
			<li class="menu__item">ホーム</li>
			<li class="menu__item">企業情報</li>
			<li class="menu__item">個人のお客様</li>
			<li class="menu__item">法人のお客様</li>
			<li class="menu__item">プレスリリース</li>
			<li class="menu__item">採用情報</li>
		</ul>
	</div>

このコードの場合は”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形式で書きます。

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

<div class="menu">
	<ul>
		<li class="menu__item menu__item_state_current">ホーム</li>
		<li class="menu__item">企業情報</li>
		<li class="menu__item">個人のお客様</li>
		<li class="menu__item">法人のお客様</li>
		<li class="menu__item">プレスリリース</li>
		<li class="menu__item">採用情報</li>
	</ul>
</div>

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を軽く紹介し、どの様に運用していくと良いかについて書きます。

Leave a Comment

お問い合わせ

お仕事の依頼や何か質問などあれば、こちらからお願いします〜。

Not readable? Change text.

Start typing and press Enter to search