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

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

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

よし

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

命名規則

ここまでで、クラスを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を書く上で必須の知識なので、この機会に理解を深めていきましょう。