BEMでCSS設計する人のためのわかりやすいコーディングサンプル

BEMでCSS設計する人にわかりやすいサンプルはこれだ!っていう例があります。

BEMでCSS設計する人のためのわかりやすいコーディングサンプル

わからない人にいきなりBlock・Elment・Modifierと言っていきなり理解できる人も少ないですよね。

そこでペットボトルをBEMでコーディングしたサンプルが説明するのに、一番わかりやすいのでは?と思っています。

BEMでCSS設計したコーディング

BEMは冒頭に書いたようにBlock・Element・Modifierという3つの要素によって構成されます。

まずはこの3つの要素を含んでペットボトルをコーディングした場合のコードを見てみます。

<div class="bottle bottle--500ml">
  <div class="bottole__label">ラベル</div>
</div>

このHTMLでなんとなくペットボトルであることがわかるのではないでしょうか。

BEMは3つの要素で構成される

上記のコードでは3種類のクラスの付け方がされています。

  • .bottle:1つの単語
  • .bottle__label:単語に_(アンダースコア)を2つ繋げて単語
  • .bottle:単語に-(ハイフン)を2つ繋げて単語

それぞれには意味があります。

この3つがBEMでのBlock・Element・Modifierを指し、順番に説明していきます。

Block

BEMでCSS設計するときは塊を作っていくイメージでコーディングすることになります。

今回のコードで塊にあたる部分は「.bottle」です。

HTMLを見てわかるように「.bottle」は入れ子の一番上の要素(div)についており、「.bottle__label」を囲んでいます。

BEMでのBlockとは「.bottle」のような1つの単語のクラスで表した、塊の一番上についた要素を指します。

Element

Elementは必ずなにかのBlockの中に存在する要素です。

例えば今回のサンプルの場合では「.bottle__label」を指し、「.bottle」クラスの中にありますね。

Modifier

Modifierは種類を表します。

例えばペットボトルには500mlや1lのような種類がありますよね。

サイズ違いや色違いのスタイルを定義する時にModifierを使います。

サンプルでは「.bottle–500ml」としており、「.bottle」クラスに500mlのバージョンを作ったことになります。

BEMのコーディングサンプル

BEMのサンプルをペットボトルを例に説明してきましたが、CSSも追加してもう少し実際に近い形にしていきます。

今回は下記のクラスを使ってコーディングします。

  • Block:.bottle
  • Element:.bottle__label
  • Modifier:.bottle–orange, .bottle–apple, .bottle–1l

See the Pen WyGGBy by Koji (@koojy) on CodePen.

ペットボトルの横並びにはdisplay: flex;を使っています。

パターンを作るときはModifierで特定のスタイルのみ指定

上記サンプルのBlockとElementの意味は下記です。

  • Block(.bottle):ペットボトルの形状のスタイル
  • Element(.bottle__label):ペットボトルのラベルのスタイル

この2つは見ての通りなので問題ないかと思うので、Modifierを詳しく説明します。

上記のコードではModifierのクラスとして下記の3つを使っています。

  • .bottle–orange
  • .bottle–aplle
  • .bottle–1l

「.bottle–orange」と「.bottle–apple」はbackgroundで色を指定しており、「.bottle–1l」はサイズを指定しています。

「.bottle」というベースのペットボトルの形状を表すクラスに対して、ペットボトルの色やサイズを増やすことができるのModifierの使い方です。

BEMでコーディングする手順

BEMを使う場合はBlock・Element・Modifierの3つの使い方さえしっかり覚えておく、スムーズにコーディングすることができます。

コーディングする時のイメージは下記です。

  1. Block(.bottle)を作る
  2. Block(.bottle)の中にElement(.bottle__label)を作る
  3. パターン一違いのスタイルはModifier(.bottle--orange, .bottle--apple, .bottle--1l)に個別にスタイル指定

BEMでのCSS設計が難しいと感じている人は、今回紹介した考え方を意識してコーディングしてみていかがでしょうか。

関連記事 → BEMのBlockはElementを入れ子にせずにコンポーネント化しよう

この記事を書いた人

コウジ

TypeScriptとVue.jsが好きなフリーランスのフロントエンドエンジニアです。
フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。

Web開発の仕事依頼

フリーランスのエンジニアとしてWeb開発の仕事をお引き受けしています。

依頼の検討をしていただきます際はポートフォリオサイトの事業・実績ページをご覧いただき、お問い合わせよりメールや各種SNSよりご連絡ください。

仕事の相談をする
基礎から学ぶ Vue.js