N.Y.C. Tech Library

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

未分類

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

投稿日:

今回は今さら聞けない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にする

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

-未分類

執筆者:


comment

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

one × one =

関連記事

技術ブログ始めました

なぜ今、技術ブログなのか 本を読んだり、セミナーに参加したりすれば知識をつけることができます。 しかし、知識は実践しなければいつまでも知識のままで本当に身についたとは言えません。 ところが、普通に生活 …

オープンセミナー広島2019に行ってきました

オープンセミナー広島2019に行ってきたので、アウトプットの練習もかねて個人的な備忘録です。今回のテーマは「学び hacks」ということで、学びに付いて学べるセッションが目白押しでした! 目次 オープ …

【lazyload】lazysizesの使い方 – 拡張編

javascript 前回はlazysizes.jsを使った基本的な遅延読み込みをご紹介しました。 連載中にバージョンが4.1.4から4.1.5になってました、メンテされてるっていいですね。 今回はl …