小僧よ、落ち着け！BEMに従い丁寧にClassの命名をしようではないか。

はじめに

クラスの命名をする際のお作法としてBEMという命名規則がある。 それぞれ下記３つの頭文字をとってBEMという。

B：Block
E：Element
M：Modifier

さてなぜ小僧が今回これを取り上げたかというと、とにかくCSS（Sassを利用中）を記述している際に、直感的にどの要素を取り扱っているのかわかりにくくなるケースが多いからだ。

これ、真面目にどうにかしたいなと思っていた時、BEM様に出会ったというわけだ。

なので今回はBEMの命名規則についてまとめておこうと思う。

BEMの構成要素

先ほども取り上げたようにBEMとはブロック、エレメント、モディファイアーのことである。それぞれもう少し詳しく説明すると下記通りになる。

Block

要素の大元となるブロック要素のこと。Blockの命名には名詞を使用する。ブロックは１つ以上のElementによって構成される。

Element

Blockに属する子要素のこと。Elementの命名にも名詞を使用する。

Modifier

Blockまたは、Elementに特別な修飾をする要素のこと。Modifierの命名には形容詞を使用する。

主な命名規則は２つ

1. BlockとElementをつなぐ場合は、アンダースコア2つでつなぐ
2. Modifierにつなぐ場合は、ハイフン2つでつなぐ

~ヘッダナビゲーションの用例~

<nav class='header-nav'>
  <ul class='menu'>
    <li class='menu__list'>TOP</li>
    <li class='menu__list'>CONTACT</li>
    <li class='menu__list menu__list--gray'>ABUOT US</li>
    <li class='menu__list'>SERVICE</li>
   </ul>
</nav>

まず、

はヘッダーナビゲーションなのでクラス名はheader-navとした。

次に、ヘッダーナビゲーションの項目についてはmenuと命名。 これまでは特にお作法に乗っ取ってどうこうということはない。 あえていうならば名詞を使っているくらい。

重要なのはここから。

menu以下のliタグのクラス名はmenu__listとした。

これはブロックであるmenuのエレメントであるためBEM命名規則に従いアンダースコア２つで繋いでmenu__listとした。

お作法に従うことで、直感的にmenuブロックのエレメントであることがわかるようになったではないか。

次に、menuの中でも1つだけ、背景色を変えたい場合。

menulist--gray'とした。 menulistエレメントのモディファイアーであるからBEM命名規則に従いハイフン２つで繋いでmenu__list--grayとした。

ブロック要素のmenu、そのエレメントであるmenulist、その部モディファイアーのmenulist--grayであるとすぐに把握できる。

なんか、ここまでいかついおじさんみたいな語調になったな。w

おわりに

地味かもしれないが、こういうのは後々にサービスの品質にも関係するかもしれない重要な要素だなと改めて実感。

実際に勉強がてら作っているアプリはクラスの命名を全て見直す始末となった。

今回はクラス命名のBEMを取り扱ったが、例えばDBテーブル名や、モデルやコントローラーもお名前の作法はとても重要である。

今後はいろいろと名前をつける際は、チームで定めるお作法や、一般的なルールなどに従ってて命名していこうと思う。