今回は今さら聞けないBEMの基本ということで、CSS設計にまつわるエントリです。「この要素にはなんてクラス名をつけたらいいんだ・・・」という悩みはWebコーダーが必ずぶつかる課題だと思います。その時は自分流のルールでいいかもしれませんが、後で編集するときやチームメンバーに読んでもらう時にわかりにくくなってしまうこともしばしば・・・。命名規則には広く普及しているCSS設計思想を流用するのがいいんです。制作会社ではBEMや他の設計思想をベースにしたコーディング規約が設定されていることも珍しくないでしょう。今回は初心者向けにBEMという命名規則の基本をご紹介します。目次BEMとはさっそく例を見てみましょう文字の区切りはハイフン1つelementのネストは禁止elementはblock内にしか存在できないバージョン違いをmodifierで表す方法blockにするかelementにするか迷ったらまとめBEMとはCSS設計思想にはOOCSS、BEM、SMACSS、MCSS、FLOCSS、FLOUなどいくつかありますが、その中でもBEMはクラス命名規則として後続のCSS設計思想に取り込まれている有名なものです。正確にはBEMの発展系であるMindBEMdingというのが有名なようなのですが、英語なのでBEMについて書いているブログ等を参照した方が早いかもしれません。BEMはBlock、Element、Modifierの頭文字を表しており、UIパーツの塊をBlockという起点にして、その構成要素をElementで、バージョン違いなどをModifierで示します。BEMの特徴にして利点は、このBlock、Element、Modifierを1つのクラス名の中で表現するところにあるのですが、文章だけだとわからないと思うのでさっそく例を見てみましょう。例を見てみましょう以下が基本形です。class="block__element"></span></div>基本的にidは使わず、classで指定します。blockはUIパーツの塊(起点)を示します。elementはblockの構成要素を示します。blockとelementはアンダーバー2つで繋ぎます。バージョン違いなどは以下のようにクラスを追記します。block__element--modifier"></span></div>modifierはバージョン違いや一時的な状態を示します。modifierはハイフン2つで繋ぎます。modifierはblockにもelementにもつけてOKです。class="primary-block__element"></span></div>blockとelementの塊がわかりやすくなるため、接続はアンダーバー2つなんですね。elementのネストは禁止よくやってしまうアンチパターンとして、elementのネストがあります。</ul></div>やっていしまいたくなる気持ちはわかりますが、elementの依存関係が複雑になっていくためアンチパターンとされています。正しい方法としては2通りあげられます。状況に応じて使い分けてください。</ul></div正しいパターン1のようにelementの中に同じレベルのelementが入るのはOKです。この場合、listはblockの外で再利用することはできません。</div></divまた、正しいパターン2のようにblockの中に別のblockが入るのもOKです。この場合、listはblockの外でも同様のUIパーツとして再利用できます。</ul></div>起点となるblockがないelementは存在してはいけません。</div></div>起点となるblockが直近のblockの外側にあるのも依存関係が複雑になるのでやめましょう。バージョン違いをmodifierで表す方法modifierはblockやelementのバージョン違いを示しますが、曖昧な概念で使い方も難しいので、チームで制作する場合は使い方について共通認識が必要です。ここではmodifierの使い方をの一例をSCSSで紹介します。この例ではSCSSの&を使ってセレクタのネストを実現していますが、&を使ったネストはアンチパターンという話もあるので注意してくださいね。...}これはあくまでも一例です。他のやり方についてはBEMのmodifierでスタイルを切り替える時の書き方が詳しいので、読んでみると面白いかもしれません。blockにするかelementにするか迷ったら原則として、一つの要素に複数のブロック・エレメントを設定することは避けましょう。blockにするかelementにするか迷ったらblockにしましょう。cardの3ブロック登場しています。このようにすることで、section__contentの中身を入れ替える時やcardを使い回す時に楽になります。多少divが増えてもblockが別れていた方が後の修正が楽ですので、参考にしてみてください。まとめBEMはクラスの命名規則として有名なCSS設計思想block__element–modifierというのがクラス名の基本構造。迷ったらdivやspanを増やしてもいいのでblockにするここまで簡単に説明してきましたが、なんとなく理解できたでしょうか?詳しく解説しているブログは他にもたくさんあるので、色々読んでみることをお勧めします。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。