N.Y.C. Tech Library

ホームページの制作テクニックや日常のハックを綴る

WEB制作

【CSS設計】今さら聞けないBEMの基本【初心者・入門】

投稿日:2019年2月18日 更新日:

今回は今さら聞けないBEMの基本ということで、CSS設計にまつわるエントリです。

「この要素にはなんてクラス名をつけたらいいんだ・・・」という悩みはWebコーダーが必ずぶつかる課題だと思います。
その時は自分流のルールでいいかもしれませんが、後で編集するときやチームメンバーに読んでもらう時にわかりにくくなってしまうこともしばしば・・・。

だから、命名規則には広く普及しているCSS設計思想を流用するのがいいんです。
制作会社ではBEMや他の設計思想をベースにしたコーディング規約が設定されていることも珍しくないでしょう。
今回は初心者向けにBEMという命名規則の基本をご紹介します。

BEMとは

CSS設計思想にはOOCSS、BEM、SMACSS、MCSS、FLOCSS、FLOUなどいくつかありますが、その中でもBEMはクラス命名規則として後続のCSS設計思想に取り込まれている有名なものです。
正確にはBEMの発展系であるMindBEMdingというのが有名なようなのですが、英語なのでBEMについて書いているブログ等を参照した方が早いかもしれません。

BEMはBlockElementModifierの頭文字を表しており、UIパーツの塊をBlockという起点にして、その構成要素をElementで、バージョン違いなどをModifierで示します。
BEMの特徴にして利点は、このBlock、Element、Modifierを1つのクラス名の中で表現するところにあるのですが、文章だけだとわからないと思うのでさっそく例を見てみましょう。

さっそく例を見てみましょう

以下が基本形です。

  • 基本的にidは使わず、classで指定します。
  • blockはUIパーツの塊(起点)を示します。
  • elementはblockの構成要素を示します。
  • blockとelementはアンダーバー2つで繋ぎます。

バージョン違いなどは以下のようにクラスを追記します。

  • modifierはバージョン違いや一時的な状態を示します。
  • modifierはハイフン2つで繋ぎます。
  • modifierはblockにもelementにもつけてOKです。

文章だと小難しいことが書いてありましたが、実際に見てみると簡単だと思いませんか?

文字の区切りはハイフン1つ

blockとelementの塊がわかりやすくなるため、接続はアンダーバー2つなんですね。

elementのネストは禁止

よくやってしまうアンチパターンとして、elementのネストがあります。

やっていしまいたくなる気持ちはわかりますが、elementの依存関係が複雑になっていくためアンチパターンとされています。 正しい方法としては2通りあげられます。状況に応じて使い分けてください。

正しいパターン1のようにelementの中に同じレベルのelementが入るのはOKです。
この場合、listはblockの外で再利用することはできません。

また、正しいパターン2のようにblockの中に別のblockが入るのもOKです。
この場合、listはblockの外でも同様のUIパーツとして再利用できます。 (そのようにCSSを設計すべきです)

elementはblock内にしか存在できない

起点となるblockがないelementは存在してはいけません。

起点となるblockが直近のblockの外側にあるのも依存関係が複雑になるのでやめましょう。

バージョン違いをmodifierで表す方法

modifierはblockやelementのバージョン違いを示しますが、曖昧な概念で使い方も難しいので、チームで制作する場合は使い方について共通認識が必要です。

ここではmodifierの使い方をの一例をSCSSで紹介します。
この例ではSCSSの&を使ってセレクタのネストを実現していますが、&を使ったネストはアンチパターンという話もあるので注意してくださいね。

これはあくまでも一例です。
他のやり方についてはBEMのmodifierでスタイルを切り替える時の書き方が詳しいので、読んでみると面白いかもしれません。

blockにするかelementにするか迷ったら

原則として、一つの要素に複数のブロック・エレメントを設定することは避けましょう。
そして、blockにするかelementにするか迷ったらblockにしましょう。

あくまでも一例ですが、section, card-container, cardの3ブロック登場しています。

このようにすることで、section__contentの中身を入れ替える時やcardを使い回す時に楽になります。多少divが増えてもblockが別れていた方が後の修正が楽ですので、参考にしてみてください。

 

まとめ

  • BEMはクラスの命名規則として有名なCSS設計思想
  • block__element–modifierというのがクラス名の基本構造。
  • elementのネストは禁止
  • elementはblock内にしか存在できない
  • バージョン違いや一時的な状態はmodifierで表す、使い方には工夫が必要
  • 迷ったらdivやspanを増やしてもいいのでblockにする

ここまで簡単に説明してきましたが、なんとなく理解できたでしょうか?
詳しく解説しているブログは他にもたくさんあるので、色々読んでみることをお勧めします。
それでは、よいコーディングを!

-WEB制作
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

one × four =

関連記事

vueアイキャッチ

Vue初心者が和暦計算してみた【令和対応】

新元号が発表されましたね 新元号は「令和」だそうです。 大きな節目を前に気分新たな方も多いのでは? 私もこの節目をスタートダッシュにしたいと思っています。 さて、本題。 最近Vueの勉強をしていて、せ …

ストロークフォント風アニメーションを作ろう

前回はsvgラインアニメーションをご紹介しました。 今回はsvgアニメーションを使ったストロークフォント風アニメーションです。 See the Pen lineAnimation by vivus-i …

svgラインアニメーションを使おう

さて、皆さんsvg使ってますか? 少しとっつきにくいsvgですが、使えると表現の幅が広がります。 今回は、簡単に使えるsvgラインアニメーションをご紹介します。 svgの詳しい仕様についてはW3Cのド …

【lazyload】画像の遅延読み込みのメリット・デメリット

目次 画像の遅延読み込みとはメリットデメリットライブラリ・プラグインlazysizes.js(非同期読み込み)lazyload.js 1.x (jQuery依存)lazyload.js 2.x (同期 …

Gulp.pipeで特定のファイルを除外する

gulpで特定のファイルをpipeから除外するテクニック【環境晒し】

ご無沙汰してます! 最近はgulpとwebpackの勉強をしてnode.jsで開発環境を作ってました。 EJS、SCSS、JS(ES6)のモジュール化、文法チェック、コード自動修正、コード圧縮、画像圧 …