HTMLのクラス名を好き勝手書いてしまうと、共同での開発がしづらかったり、別の人がコードを修正しづらくなってしまいます。
複数の人が手を加えるHTMLやCSSを書く場合、設計手法を取り入れて皆が読みやすい、後から改修しやすい設計にするように心がけましょう。
その設計手法にはいくつか種類がありますが、今回はBEMについて解説していきます。
BEMとは
Block、Element、Modifierの頭文字をとって、BEM（ベム）という名前になっています。
BEMは独特なクラス名を使用するので、初めて見る人は「うっ」と思うかもしれません。
しかし、クラス名でサイトの構造がある程度分かるため、慣れるととても便利な設計手法です。
BEMの書き方
BlockとElementはアンダースコア（_）二つでつなぎます。
ElementとModifier（もしくはBlockとModifier）はハイフン（-）二つでつなぎます。
Block、Element、Modifierの意味については、後で解説します。
見慣れないと気持ち悪いですよね。慣れればこの形が自然になるので、特に問題はありません。
Block、Element、Modifierの違い
BEMでは、Block、Element、Modifierの三つに分けてクラス名を書きます。
Blockはナビゲーションは入力フォームなど部品やヘッダーやフッターなどの大きなセクションです。
Elementはその部品を構成するための中身というイメージです。
例えば、ナビゲーションというBlockの中に、一つ一つのメニューというElementがあります。
入力フォームというBlockには、テキストボックスや送信ボタンというElementがあります。
Modifierは、同じパーツ（ブロック）ではあるけど他とは状態や見た目が異なる場合に使います。
例えばこの画像のように、クリックできないボタンには他と異なるクラス名を付けるような場合、Modifierを記述します。
どうでしょう。クラス名だけでボタンが何なのか予測がしやすくないですか？
BEMのルール
BEMにはいくつかのルールがあり、それを守ることで他の人でも分かりやすいコードを書くことができます。
以下のようなHTMLがあったとします。
HTMLのクラスの振り方
<!-- 良い例 -->
<button type="button" class="form__btn">送信</button>
<button type="button" class="form__btn form__btn--disabled">送信</button>
<!-- 悪い例 -->
<button type="button" class="form__button">送信</button>
<button type="button" class="form__button--disabled">送信</button>Modifierがあるクラス名とないクラス名は両方記述します。
こうしないと、CSSの記述が長くなる上、修正するのが面倒だからです。
基本は.form__btn にスタイルを指定して、.form__btnとは異なるスタイルだけを.form__btn–disable に指定します。
また、buttonではなくbtnのように省略した形で記述します。
単語はハイフンで繋げる
単語はハイフン（-）一つで繋げて記述します。
例えば、
<div class="block__element--size-big"></div>こんな感じです。
CSSのセレクタの書き方
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="">menu</a></li>
</ul>
</nav>一般的な書き方とBEMの違いを見てみましょう。
/* 良い例 */
.nav__item {
}
/* 悪い例 */
.nav ul li {
}
/* 悪い例 */
ul.nav__list li {
}.nav ul li みたいな「親要素 子孫要素」みたいな書き方はしません。
.nav ul li とか .nav > ul > li とかややこしいセレクタが増えると見づらいです。必ずクラス名で指定をして、どこにCSSが適用されているのかを明確にします。
あと、ul.nav__list みたいな書き方もダメです。例えばh1要素が後からh2やh3に変更とかは良くありますよね。h1.title のように要素が指定されているとh2.titleにいちいち書き換えなくてはいけません。
BEMのメリット
少し説明しましたが、BEMにはいくつかのメリットがあります。
- チームでの開発がしやすくなる
- クラス名でサイトの構造が推測しやすい
- パフォーマンス
BEMでは、基本的に「親要素 子要素」という形でセレクタを書きません。
ブラウザの仕組み上、「親要素 子要素」というセレクタよりもクラスを振って直接指定した方が処理は速くなります。
【応用編】BEMにはSass（SCSS）が便利
BEMを書くなら、Sass（SCSS）を使うのがおすすめです。
Sassなら次のような書き方ができますね。
.block {
&__element {
&--modifier {
}
}
&__element-2 {
&--modifier {
}
}
}これなら無駄な記述が無くて効率よく書けます。
入れ子になっているので、HTMLの構造も分かりやすいです。
Blockさえかぶらなければ、思わぬクラス名の重複を防ぐこともできます。
BEMの使用例
百聞は一見にしかず。BEMを使って構築されているサイトを参考にするのが早いですね。
以下のサイトはBEMを使って記述されています。
まとめ
BEMは大規模な開発に便利というのもありますが、「ルールを定める」ということにも意味があります。
オレオレルールで書かれたHTMLやCSSを、他の人が見ると「えっ？？」となる場合もあります。
企業・プロジェクト単位でしっかりとルールを決めることが、効率的な開発につながるのです。
参考サイト：BEM公式ドキュメント（英語）
