すぎもブログ

【CSS】BEMの考え方〜Mixを理解しよう〜

  • 2022年4月2日
  • 2022年6月4日
  • CSS
  • ,
CSS

BEMとは

CSSをコーディングする際に、設計規則としてBEMという考え方があります。この規則を学習したときに私はこう思いました。

「BEMって結局どうすればいいの？」と。

BEMの考え方といいますか概念をうまく捉えることができませんでしたが、CSSのカスケーディングという考え方に気づくことで理解することができました。

私の考え方をご覧頂くことで、BEMの理解のお役に立てればと思います。

BEMの考え方について私なりの結論となりますが、以下のようになります。

 BEMの考え方：CSSのカスケーディングを活用してMixで記述していく

従いまして、本記事では「Mix」について説明をさせていただきます。

BEMの基本

BEMについて少しだけ説明いたします。

BEMはBlock、Element、Modifierの頭文字をとったものです。簡単に言うと下記のとおりです。

  • Block：使い回せる単位のモジュール （カード、テーブルなど）
  • Element：Blockを構成する要素
  • Modifier：BlockやElementをカスタマイズ（ボタンのサイズを変えるなど）

記述の仕方は「Block名 _ _ Elememt名 – – Modifier」となります。

Block名とElement名はアンダースコア２つで区切ります。これは逆に言いいますとBlock名やElement名で複数の単語を使う時、ハイフンを使って区切ることができる（ケバブケースで書くことができる）ということになります。

この規則にしたがってクラス名を付けてみます。順序リストを例にしますと下記のようになります。

<ol class="order-list">
   <li class="order-list__item">
　　　　リスト項目
   </li>
</ol>

上記の例ではBlock名が「order-list」、Element名が「item」となります。

Block名は「order」と「list」の２つの単語がありますが、ハイフンで区切って「order-list」とすることができます。

Element名ですが、「Block名 _ _ Elememt名 _ _ Elememt名」というようにネストされた命名は推奨されておりません。

これも逆に言いますとHTMLのネストに従う必要がないということになります。

先程のコードで<time>を追加した例となります。

<ol class="order-list">
   <li class="order-list__item">
　　　　<time class="order-list__date" datetime="2022-04-02">
         2022/04/02 </time>
   </li>
</ol>

ここで<time>に対するクラス名ですが、HTMLのネストに従って「order-list _ _ item _ _ date」とクラス名までネストする必要はございません。

Block「order-list」の要素となっていますので、シンプルに「order-list _ _ date」とすればOKです。

「作成日」と「更新日」といった似たような要素がある場合は、「order-list _ _ created-date」、「order-list _ _ update-date」というような命名にすれば Element名をネストせずに済みます。

クラス名をつける時は「Block名 _ _ Elememt名 – – Modifier」という記述の仕方をきちんと守り、名前をネストすることは可能な限り避けたほうが良いかと思います。
（ネストはあくまでクラス名の命名に関してとなります。 HTMLでのネストではないので誤解なきようお願いします。）

本記事ではModifierの説明は割愛いたします。

CSSのカスケーディング

CSSはカスケーディングできるという特徴があります。

まず以下のコードを御覧ください。

<div class="sample1 center"> sample1 </div>
.sample1{ width:500px; }
.center{
         margin-right:auto;  /* 中央揃え */
         margin-left:auto; 
}

divに対して「sample1」と「center」という２つのクラス名を付けて、それぞれのクラスに対してスタイルをあてております。

中央揃え（marginの指定）は「sample1」に直接スタイルをあてることもできますが、「center」とクラスを分けておいてそこにスタイルをあてることもできます。

これがカスケーディングの考え方となります。

つまり一つ一つのクラスに異なるスタイルをあてておいて、そのクラスを複数個指定していくことで全体のスタイルをあてるということが、「カスケーディング（数珠つなぎ）」ということになります。

 カスケーディング：異なるスタイルを記述しているクラスを複数個つけること

Mixについて

BEMはBlock、Element、Modifierで記述をしていきますが、ここにカスケーディングの考え方を合わせていきます。

先程のコードで上位ブロックとして<div>「sample2」を追加した例でご説明していきます。まずは下記のコードを御覧ください。

<div class="sample2">
   <ol class="order-list sample2__item">
      <li class="order-list__item">
　　　　   <time class="order-list__date" datetime="2022-04-02">
　　　　　   2022/04/02 </time>
      </li>
   </ol>
</div>

このコードは下記のような構成になっております。

  • <div>
    • Block「sample2」
      • Element「sample2__item」 → 「order-list」と同じHTML要素
  • <ol>
    • Block「order-list」 → 「sample2__item」 と同じHTML要素
      • Element「order-list__item」
      • Element「order-list__date」

<div>のElement「sample2__item」と<ol>のBlock「order-list」が同じHTML要素となっております。

CSSはカスケーディングできるという特徴を持っていますので、<ol>に対してシンプルに「sample2__item」と「order-list」の２つのクラスを指定すればOKということになります。

つまりBlock（リストやテーブルなど）を作っておいて上位ブロックはそれをElementにします。上位ブロックのスタイルはそのElementのクラスに対して記述していくという考え方が「Mix」となります。

上記のコードにスタイルをあてていくと下記のようなイメージになります。

<div class="sample2">
   <ol class="order-list sample2__item">
      <li class="order-list__item">
　　　　   <time class="order-list__date" datetime="2022-04-02"> 
　　　　　　　2022/04/02 </time>
      </li>
   </ol>
</div>
.sample2__item{
   margin-left: auto;　/* sample2__itemを中央揃え */
   margin-right: auto;
   margin-bottom: 20px;  /* sample2__itemに対するmargin-bottom */
}
.order-list__item{
   margin-bottom: 10px;  /* リストアイテムに対するmargin-bottom */
}
.order-list > *:last-child{
   margin-bottom: 0px;  /* order-list全体の初期値：0にしておく */
}
.order-list__date{
   font-size: 16px;
}

<ol>自体のマージンは初期値を設定しておきます。（ここでは last-childを指定して「margin-bottom:0」としていますが、初期値は0でなくてもかまいません。）

<ol>をElementとして使う場合は、そのElementのクラスにスタイルをあてていきます。上記のコードでは「sample2 _ _ item」に対して、「margin-bottom:20px」と指定しています。

別のBlockで<ol>を使いたい場合は、クラス「sample2」を別のクラス（別のElement）に置き換えることで、「order-list」を使い回すことができます。

こうすることで、BlockのスタイルはそのBlockのクラスに対して記述することになりますので、保守しやすいコードを実現することができます。

つまりMixとはBlockでもありElementでもある要素に対して、きちんとクラスを分けてスタイルをあてて、そのクラスを複数つけていくという考え方になります。

  Mix：BlockはBlockのクラス、ElementはElementのクラスに記述して、
           そのクラスを複数つけることでスタイルをあてること

まとめ

「【CSS】BEMの考え方〜Mixを理解しよう〜」についてまとめてみました。

私個人の考え方ですので多少正確ではない表現もあるかと思います。しかし本記事をご覧いただくことでBEMの考え方について少しでもご理解いただけたのなら幸いです。