CSSのコーディングルール、BEMとは

今回は、CSSの書き方のルールであるBEMというものを紹介します。
ルールが決まっていると開発がスムーズになるのはもちろん、
こういった書き方のルールには作った人の思想が含まれているので、その書き方を使っているだけで効率の良いCSSの考え方に矯正していく効果があります。
ルールとして完璧なものではないのですが、その思考過程を理解するだけでも非常に価値のあるものです。
ぜひ、覚えて使ってみましょう。

BEM（Block Element Modifier）というのは、CSSのクラス名の命名規則のことで、BEMの中にもいろいろと書き方が存在しますが、その中でもMindBEMdingというものが主に使用されています。
先ほども書きましたが、

弊社でも、たくさんの外注の方へ制作を依頼していますが、こういったコーディングルールの統一があるだけでずいぶんと楽になり、弊社でもBEMをベースとしたルールで運用しています。
ただ、今回紹介するように、BEMのルールをそのまま使うと開発状況によっては色々と不便かもしれません。
すべての細かいルールまで全員に浸透させるのは難しく、最低限の重要な部分のルールだけを使うだけでもかなりコーディングの質の統一化ができます。

BEMの書き方を知ろう

BEMはBlock Element Modifierの略で、
名前の通り、ＨＴＭＬの要素を

・Block
・Element
・Modifier

の３つに分解して考えます。

例えば、こんな感じになります。

.block__element--modifier{
    // ここにスタイル
}

・Block
・Element
・Modifier

の3つの要素を理解することでBEMは簡単に使えるようになるので、
それぞれの要素について説明しましょう。

Block

まずはBlockですが、これは一つのまとまった役割を持つ要素で、
具体的にはヘッダーやフッター、サイドメニューなどがわかりやすいです。
コンポーネントという言葉を使った方がしっくりくる人もいるかもしれません。

このように、ある程度のまとまりとしての要素です。
例えば、

・header
・section-title
・gallery

などでしょうか。
それぞれ、何らかの役割を持つ単位でまとまった要素で、今後使いまわせることを意識したまとまりです。
同じような役割が必要になったとき、そこに同じものを再利用することができるという単位です。
このブロックの分け方については、人それぞれで正解があるわけではありません。
そういう意味では、非常にセンスの問われる部分でもあるのですが、
まずは大まかな役割で分けたときに分割できる範囲で、形として成立する程度の1つのエリアをブロックとすると良いかと思います。
ちなみに、名前が長くなる場合には単語同士を「-」ハイフンでつなぐことになっています。
Block要素は一番大きな枠組みですので、ユニーク（重複しない）な名前でないといけません。

Element

次にElementについてですが、
ElementはBlockの中に存在するパーツだと思ってもらえるとよいでしょう。
あくまでBlock内にあるものとして、親要素としてのBlockの名前を引き継ぐことで、こちらも他の名前と被らないユニークな名前となります。

例えば、ヘッダー内にロゴや検索、ナビゲーションなどがあります。
BlockとElementは「__」アンダーバー2つでつなぐルールとなっていて、

.header__logo{
}

.header__search{
}

.header__contact{
}

.header__navigation{
}

のように書きます。

ナビゲーションの中にもElementが存在しますね、つまりElementが入れ子になっています。

Blockを構成するパーツはElementになるので、このように要素上は入れ子になっていても構いません。
ただし、名前は入れ子にできないので、

.header__navigation__item{
}

このようにするのはダメ！
同レベルのものとして名前を付けます。
この場合、長い名前は「-」でつなぐことができるので、次のように書いたりします。

.header__navigation{
}

.header__navigation-item{
}

Modifier

次にModifierです。
Modifierは状態や振る舞いを表します。
例えば

・ホバー状態
・アクティブ/非アクティブ

など、同じ要素が状況によって変化する場合の状態を表現します。
ElementとModifierの間は２つの「–」でつなぐのがルールです。
先ほどのナビゲーションが選択されている状態は、

.header__navigation-item--selected{    // ヘッダー内のナビゲーションアイテムの選択状態
}

と書くような感じですね。

こういった書き方はクラス名が長くなりがちではありますが、
位置がその役割を表すというのは、見た目以上に情報量が多く含まれていることになるので実用的です。
初めは書き方に戸惑うかもしれませんが、慣れると合理的でその考え方でも学んでおく価値はあるかと思います。

Blockはどこでも使いまわせるように意識して作る

ここでは具体的なスタイルのコードは書きませんでしたが、
Blockにあたる要素は、１つのまとまった機能として使い回しができる前提で作る必要があります。
例えば、スライドをBlockとして定義する場合に、

このスライドの要素は他の場所でも使い回せるのが理想です。
なので、こういった要素に対して全体の幅を指定したり、上下のマージンを指定するという、場所に依存するようなスタイルの指定は行わないのが原則です。
つまり、ここで使えば幅は100%だけど、別の場所で使う場合は幅60%にするなんてことがあると思います。
配置される親要素によって、そのサイズや間隔、位置などは変わってくると思うので、それらについてはその都度場所に応じたスタイルを別で指定することになるのでBlockそのものには指定しません。
例えば、以下のようなものは配置する場所によって異なるので指定しないということになりますね。

.slider{
  margin:30px 0;
  width:500px;
  position:relative;
  top:50px;
  left:100px;
}

そのBlockをどこで当てはめてもうまく表示される（汎用性があり使い回しができる）というのが理想の形だということです。

いかがでしたでしょうか。
弊社でもBEMのルールをベースにコーディングをするように意識しています。
あくまでベースとして、完全なBEMのルールには従っていませんが、ベースとなる考え方は非常に有益ですので、
まずは使えるところから使ってみましょう。

今回は、ざっくりとした紹介ではありますが、ルール的にはこれだけ覚えれば十分です。
BEMの書き方はsassとも親和性が高く、sassと同時に語られることも多いですので、またその辺りはいつか書きたいと思います。