Zenn
😀

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

2021/04/02に公開
bem
tech

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

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

初心者のためのHTMLとCSSで横並びを実現する1番簡単な方法

パターンを作るときは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設計が難しいと感じている人は、今回紹介した考え方を意識してコーディングしてみていかがでしょうか。

Discussion