見出し画像
Photo by ruquia7

BEMという命名規則をマスターしたい @TECH CAMP #13

とだ

　どうも、ちょっとプログラミングに関するアウトプットがおざなりになってしまいました、とだです。
　今日は簡単に、個人的におさらいしたいCSS設計で最も難しいとされるBEMについてまとめたいと思います。

CSS設計とは

　まず、CSS設計とはCSSを記述する時のルールのことです。

BEMとは

　BEMとは、多くの開発者が取り入れているCSS設計です。BEMはBlock、Element、Modifierの頭文字を取ったもので、ページを構成する要素をBlock (大きなくくり)、Element(大きなくくりの中にいる要素)、Modifier(大きなくくりを修飾する)のどれかに当てはめてクラスを命名する手法です。BEMはクラスの命名規則が厳格なのが特徴です。

Block、Element、Modifierとは

　BEMではページを構成する要素をBlock、Element、Modifierの3つに分類し、組み合わせることでクラスを命名します。Block、Element、Modifierの3つを使用して命名することで、クラス名だけでHTML要素の意味を伝えられます。これはかなり可読性が上がっていいですよね。
　各要素それぞれについて意味をまとめます。

Block
Blockとは、ある要素の大元となる、大きなくくりとなるブロック要素です。Blockの命名には名詞を使用します。ElementやModifierは、このBlockを起点に命名されます。

Element
Elementとは、Blockに属する子要素、大きなくくりの中の要素です。1つ以上のElementによってBlockは構成されています。Elementの命名には名詞を使用します。

Modifier
Modifierとは、Blockまたは、Elementに特別な修飾をする要素です。Modifierの命名には形容詞を使用します。Blockの中の、特に他と色を変えたいなどの特定の就職をしたいときなどに使う部分です。

命名規則について

　BEMの命名規則は以下の2つです。

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

　例と一緒に照らし合わせたほうがイメージしやすいので、以下のヘッダーメニューを作成した例を参照してください。

例えば以下のようなhtmlを書いたとします。

<nav class='HeaderNav'>
 <ul class='Menu'>
   <li class='Menu__list'>TOP</li>
   <li class='Menu__list'>CONTACT</li>
   <li class='Menu__list Menu__list--backBlack'>ABOUT US</li>
   <li class='Menu__list'>SERVICE</li>
  </ul>
</nav>

　navはヘッダーのナビゲーションメニューなので、クラス名をHeaderNavとしました。このようにクラス名の単語数が2つ以上の場合はキャメルケースまたはスネークケースでつなぎます。ulはheader-navの子要素ですが他のヘッダーメニュー以外の部分でも使用したいので、クラス名をMenuとしました。liはMenuの子要素なので、クラス名をMenu__listとしました。Modifierが特定の部品を修飾したい時に使用する例を示すため、liのうちABOUT USだけは背景色を黒くしたいので、クラス名をMenu__list--backBlackとしました。
　このhtmlもとに、Sassを記述すると以下のようになります。記法はscssです。

.Menu {
  list-style: none;
  &__list {
    background-color: #3BD1EC;
    color: #FFF;
    float: left;
    font-size: 30px;
    padding: 2% 1%;
    text-align: center;
    width: 23%;
    &--backBlack {
      background-color: black;
      color: #3BD1EC;
    }
  }
}

　こうすることでModifierを使用した部分だけ背景色を黒くすることができます。特定の部分だけ変えたいようなことがあることも、コードのクラス名からわかるのでいいですよね。

BEMを使用するメリット

　メリットは以下の2つがあります。　

a. クラスの命名が簡単になる
b. 要素の再利用がしやすくなる

　　それぞれまとめます。

a. クラスの命名が簡単になる
　CSS設計において最も難しいとされているのは命名規則だそうです。そこで、Webページを構成する要素をBlock、Element、Modifierの3つに分類して考えます。この3要素のみで命名することで逆に命名するときに悩まなくなります。

b. 要素の再利用がしやすくなる
　共通の要素を別の場所で再利用しようとしても、要素がHTMLに依存していると同じCSSを2つ書かなければなりませんが、BEMを使用することでクラスの命名がHTML構造に依存しなくなります。HTML構造に依存しないことで、要素の再利用がしやすくなるというメリットがあります。

まとめ

　一人で開発するなら、クラス名の命名にそこまでこだわる必要はないのかもしれませんが、チームで開発したり、他の人にフィードバックをもらいたいなら、多くの人が理解できる記述をする必要がありますよね。BEMという規則を取り入れれば、可読性が上がってみんなが理解しやすくなりますし、自分も悩まずにクラス名を指定できるので、ぜひマスターして慣れていこうと思います。

追記

QiitaにBEMについて詳しくまとめてある記事がありましたので紹介しておきます。


この記事が気に入ったらサポートをしてみませんか？