TOP
Column
BEMとは？CSS設計で保守性・可読性を高める命名規則

BEMとは？CSS設計で保守性・可読性を高める命名規則

HTML / CSS / JavaScript

2026.07.29

都築

CSSを書くときにクラス名を適当に書いてませんか？

正直、クラス名はなんでもスタイルが当たればコーディングはできますが、CSS設計の一つであるBEMを取り入れることで、管理しやすく読みやすいCSSを書くことができます。

また、Sassのネスト記法と相性が良く、関連するスタイルをまとめて記述できます。Sassを使っている或いはこれからSassを学ぶ方にも、BEMも理解しておくことをおすすめします。

BEMとは

CSSのクラス名をルール化して、保守しやすくする命名規則です。

B…Block（独立した部品）
E…Element（部品の中の要素）
M…Modifier（見た目や状態の違い）

クラス名の書き方

<div class="block__element--modifier">

コーディング例

<div class="article">
　<h2 class="article__title">記事タイトル</h2>
　<p class="article__detail">記事詳細テキスト</p>
　<a href="#" class="article__link article__link--primary">もっと見る</a>
</div>

例えば記事のブロックであれば、

Block(独立した部品)…article
Element(部品の中の要素)…article__title、article__detail、article__link
Modifier(見た目や状態の違い)…article__link–primary

のように、Blockを基準に構成していきます。

Blockは「単体で意味を持つ独立した部品」と考えればいいので、Blockの中に、別の独立した部品として扱いたい要素がある場合は、別のBlockとして定義できます。

<div class="article">
　<h2 class="article__title">記事タイトル</h2>
　<p class="article__detail">記事詳細テキスト</p>
　<a href="#" class="button button--primary">もっと見る</a>
</div>

「article」Blockの中に「button」というBlockを入れることもできます。

こうすることで、buttonを単体で使い回すことができるようになります。

留意点：Elementを入れ子にして命名しない

例えば、「article__title」の中に、サブタイトルがあったとします。その場合のサブタイトルのクラス名は、

<div class="article">
　<h2 class="article__title">
　　記事タイトル
　 <span class="article__subtitle">サブタイトル</span> <!-- ←ココ -->
　</h2>
　<p class="article__detail">記事詳細テキスト</p>
　<a href="#" class="button button--primary">もっと見る</a>
</div>

となります。

「article__title」の中に「subtitle」という要素が入っていますが、この場合でも「article__title__subtitle」とは書きません。
BEMではElementを入れ子にして命名するのではなく、Blockを基準に命名します。

BEMを使うメリット

Block単位で管理しやすい
CSSの影響範囲が分かりやすくなる
クラス名を見ただけで、どこのパーツかわかりやすくなる
複数人で開発する場合でもルールを共有しやすい

SassとBEMを使った場合

上記のarticleブロックをSassで書くと、

.article {
 background: white;

 &__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
 }

 &__subtitle {
  display: block;
  font-size: 15px;
  margin-bottom: 10px;
 }

 &__detail {
  font-size: 16px;
  margin-bottom: 20px;
 }
}

.button {
  text-align: center;
  padding: 10px;
  
  &--primary {
   background: blue;
   color: white;
  }}

きれいにまとまり、関連するスタイルをまとめて書けるため、コードの可読性や保守性が向上します。