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で書き直してみてください。
コードの読みやすさが一気に変わるはずです。
