讃岐小僧のEngineering×Techメモ

未経験から挑戦中のプログラミングや、趣味の野球や狩猟について、その他、ビジネスやテクノロジーをテーマに様々なことをつぶやく場所です。

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

はじめに

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

B:Block
E:Element
M:Modifier

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

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

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

BEMの構成要素

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

Block

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

Element

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

Modifier

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

主な命名規則は2つ

  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>

まず、