落ち着け！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>

まず、