コード設計2021.04.02

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

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

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

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

目次

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Modifierは種類を表します。

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

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

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

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

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

@[codepen](https://codepen.io/koojy/pen/WyGGBy)

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

[初心者のためのHTMLとCSSで横並びを実現する1番簡単な方法](./html-css-horizontal)

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

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

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

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

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

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

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

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