脱初学者 CSS設計BEMで可読性向上委員会

はじめに

この記事はある程度HTML/CSSがかけるようになってきた人が少し初学者から一歩抜け出すきっかけになるようにと書きました。ある程度知識が増え、コードがかけるようになってきたら、次は可読性を高めることを意識しましょう。前提として、今回のスタイリングではCSSを拡張して、書きやすく、見やすくしたスタイルシートであるSassを使用しているのでご了承下さい。

BEMを使用するメリット

クラス名が簡単になる

BEMではページを構成する要素をBlock、Element、Modifierの３つに分類して考えます。
Block、Element、Modifierのみでクラスを命名することでクラス名に悩むことがなくなります。

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

以下の例を見て下さい。
「block」というクラス名を元に他のクラスも定義されていますね。
これによって要素が何度も使い回すことができます。

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

命名規則

それでは実際にBEMを使ってクラスを設計していきます。
BEMの命名規則は以下の通りです。

• 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としました。
「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;
    }
  }
}

注意点

BEM記法は入れ子構造を推奨していないため、Sassと併用するときに入れ子にしないことをおすすめします。

最後に

今回はCSSのクラス設計で必須の知識である、「BEM」について紹介しました。
他にも様々なCSS設計の種類がありますが、「BEM」は特にメジャーな記法です。
スムーズにHTMLを書く上で必須の知識なので、この機会に理解を深めていきましょう。