BEM設計完全解説-CSSがぐちゃぐちゃになる前に知っておきたい設計ルール

Web制作をしていると、こんな問題にぶつかることがあります。

• CSSが長くなりすぎる
• セレクタがどんどん深くなる
• 修正すると別の場所が崩れる
• 同じスタイルを何度も書いている

これは多くの場合、CSS設計が整理されていないことが原因です。

その問題を解決する代表的な方法がBEM（ベム）設計です。

この記事では

• BEMとは何か
• なぜBEMが必要なのか
• BEMのルール
• 実務での使い方
• よくある間違い

を 初心者〜実務レベルまで分かるように解説します。

BEMとは？

BEMはCSS設計手法の一つです。

BEMは次の3つの要素で構成されています。

Block
Element
Modifier

頭文字を取ってBEMと呼ばれています。

BEMの基本構造

BEMは次のようなクラス名になります。

.block
.block__element
.block--modifier

例

.card
.card__title
.card__text
.card--featured

それぞれの意味を見ていきます。

Block（ブロック）

Blockは独立したコンポーネントです。

例

<div class="card">
</div>

cardは単体で存在できるUIです。

他の例

header
menu
button
card
form
modal

ポイントBlockは単体で成立するUIです。

Element（エレメント）

ElementはBlockの中のパーツです。

例

<div class="card">
<h2 class="card__title">タイトル</h2>
<p class="card__text">説明</p>
</div>

CSS

.card__title{}
.card__text{}

ポイント

Block__Element

アンダースコア2つで区切ります。

Modifier（モディファイア）

Modifierは状態やバリエーションです。

例

<div class="card card--featured">

CSS

.card--featured{
background:gold;
}

例

button--primary
button--large
card--active

ポイント

Block--Modifier

ハイフン2つです。

BEMの完成例

HTML

<article class="card card--featured"><h2 class="card__title">
タイトル
</h2><p class="card__text">
説明
</p><a class="card__button">
続きを読む
</a></article>

CSS

.card{
padding:20px;
background:white;
}.card__title{
font-size:20px;
}.card__text{
color:#666;
}.card__button{
display:inline-block;
}.card--featured{
border:3px solid gold;
}

これがBEMです。

なぜBEMが必要なのか？

BEMを使う理由はCSSの崩壊を防ぐためです。

CSS設計がない場合

例

.header ul li a span{
color:red;
}

問題

• セレクタが長い
• HTML構造に依存
• 再利用できない

BEMの場合

.nav-link{}

HTML

<a class="nav-link">

メリット

• シンプル
• 再利用可能
• 保守しやすい

BEMのメリット

BEMを使うと次のメリットがあります。

① CSS衝突が起きにくい

.card__title

のように名前が明確です。

② セレクタが浅くなる

NG

.header ul li a span

OK

.nav-link

③ 再利用しやすい

ボタンコンポーネント

<button class="button button--primary">

④ コードが読みやすい

HTMLを見るだけで

構造が理解できます。

BEMのよくある間違い

間違い① Elementを深くしすぎる

NG

.card__header__title

BEMではElementは1階層が基本です。

間違い② HTML構造に依存

NG

.card .title

OK

.card__title

間違い③ Modifierの誤用

NG

.card--title

titleはElementです。

BEMの実務例

実際のUIで見てみましょう。

ボタンコンポーネント

HTML

<button class="btn btn--primary">
購入
</button>

CSS

.btn{
padding:10px 20px;
border-radius:4px;
}.btn--primary{
background:blue;
color:white;
}

カードUI

HTML

<article class="card"><img class="card__image"><h2 class="card__title"><p class="card__text"><a class="card__link"></article>

BEMとセマンティックHTML

BEMはCSS設計

セマンティックHTMLはHTML設計です。

例

<article class="card"><h2 class="card__title"></article>

HTMLは意味
CSSはBEM

これが理想です。

BEMを使うときのルール

まとめ

① Blockは独立UI
② ElementはBlockのパーツ
③ Modifierは状態
④ セレクタはclassのみ
⑤ セレクタは浅く

BEMが向いているプロジェクト

BEMは特に

• 大規模サイト
• チーム開発
• コンポーネントUI
• デザインシステム

で効果を発揮します。

BEMと他のCSS設計

代表的なCSS設計

手法	特徴
BEM	コンポーネント設計
OOCSS	オブジェクト指向CSS
SMACSS	カテゴリ分類
ITCSS	レイヤー設計

その中でもBEMは最もシンプルです。

まとめ

BEM設計とはCSSを壊れにくくする設計ルールです。

ポイント

• Block（独立UI）
• Element（パーツ）
• Modifier（状態）

この3つを意識するだけで

• CSSが整理される
• 再利用できる
• 保守しやすい
• チーム開発が楽

になります。

最後に

CSSが上手い人の共通点は「設計していること」です。

BEMはその第一歩になります。

ぜひ一度、今のCSSをBEMで書き直してみてください。

コードの読みやすさが一気に変わるはずです。

お気に入り