【CSS設計】クラスの命名規則であるBEMを理解しよう！

今回はCSSのクラス設計で必須の知識である、「BEM」について紹介したいと思います。

命名規則が統一されていればクラス名を考える必要がなく、スムーズにHTMLを書くことができるので便利です。

BEMとは

BEMとは多くの開発者が取り入れているCSS設計です。

BEMは、厳格なクラスの命名規則が特徴です。

B（Block）E（Element）M（Modifier）の略で、ページの構成要素をBlock/Element/Modifierのどれかに当てはめてクラスを命名します。

BEMを使用するメリット

クラスの命名が簡単になる

BEMではページを構成する要素をBlock、Element、Modifierの３つに分類して考えます。

Block、Element、Modifierのみでクラスを命名することでクラス名に悩むことがなくなります。

要素の再利用がしやすくなる

例を見てみましょう。

<div class="block">
  <div class="block__element"></div>
  <div class="block__element block__element--modifier"></div>
</div>

このように「block」というクラス名を元に他のクラスも定義されていますね。

よし

要素が何度も使いまわせるということだね！

命名規則

ここまでで、クラスをBlockとElementとModifierで設計することを学びました。

では、実際にどのように設計されるのでしょうか。

規則は以下の通りです。

• BlockとElementはアンダースコア（_）２つでつなぐ
• Modifierにつなぐ場合は、ハイフン（-）２つでつなぐ

BEMを使ってみよう

それでは実際にBEMを使ってクラスを設計していきます。

<nav class="HeaderNav">
  <ul class="Menu">
    <li class="Menu__list">A</li>
    <li class="Menu__list">B</li>
    <li class="Menu__list Menu__list--backBlack">C</li>
    <li class="Menu__list">c</li>
  </ul>
</nav>

navはヘッダーのナビゲーションメニューなので、クラス名をHeaderNavとしました。

このようにクラス名の単語数が2つ以上の場合はキャメルケースorスネークケースで繋ぎます。

「Menu__list–backBlack」は、「Block__Element–modifier」の形をしています。

このHTMLにCSSを当てると、以下のようになります。

.HeaderNav {
  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: #000;
      color: #3BD1EC;
    }
  }
}

今回はCSSのクラス設計で必須の知識である、「BEM」について紹介しました。

スムーズにHTMLを書く上で必須の知識なので、この機会に理解を深めていきましょう。