CSS設計：BEM（ベム）の考え方

CSS設計とは、「読みやすく、再利用しやすく、壊れにくい」コードを書くためのルールのことです。その中でも世界的に有名な手法が「BEM」です。

BEMの3つの構成要素

BEMという名前は、以下の3つの頭文字から取られています。

Block (ブロック)パーツの塊。独立して存在できるもの。
例：.card, .menu, .button
Element (要素)Blockを構成する中身。アンダースコア2つで繋ぐ。
例：.card__title, .card__img
Modifier (修飾子)状態や色の変化。ハイフン2つで繋ぐ。
例：.button--red, .button--large

実際のコード例

<!-- HTML -->
<div class="card">
  <h2 class="card__title">見出し</h2>
  <button class="card__btn card__btn--alert">警告ボタン</button>
</div>

なぜアンダースコアを2つ使うの？

単語の区切り（.main-content）と、BEMの構造（__element）をパッと見て区別するためです。

BEMを導入するメリット

設計時のコツ

「Elementの中にさらにElementを入れない」のがBEMの基本です。

■.card__list__item （深くなりすぎて複雑）
■.card__item （Block直下の要素として扱う）

スタイルのバリエーションもModifierで解決！

通常ボタン 警告ボタン (--red)