CSS

CSS設計の基本｜BEM・OOCSS・SMACSSをわかりやすく解説

✅ CSS設計とは？

Webサイトが大きくなると、「CSSがぐちゃぐちゃになって管理できない！」 という問題が発生します。

  • どのクラスがどこで使われているかわからない
  • 修正すると別の場所に影響する
  • クラス名がバラバラでチーム開発が大変

👉 こうした課題を解決するために考えられたのが CSS設計 です。

CSS設計とは、「CSSを整理して保守しやすくするためのルールや考え方」 のこと。
代表的な手法が BEM・OOCSS・SMACSS です。

📌 1. BEM（Block, Element, Modifier）

🔹 基本ルール

BEMは 「ブロック」「要素」「修飾子」 で構成される命名規則。

  • Block（ブロック） → コンポーネントの単位
  • Element（要素） → ブロックの中のパーツ
  • Modifier（修飾子） → 状態やバリエーション

🔹 例：ボタン

<button class="btn btn--large">送信</button>
/* Block */
.btn {
  background: #3498db;
  color: #fff;
}

/* Modifier */
.btn--large {
  padding: 20px 40px;
}

👉 規則的な命名により、クラス名を見ただけで役割がわかる のがメリット。

📌 2. OOCSS（Object Oriented CSS）

🔹 考え方

OOCSSは 「オブジェクト指向CSS」 の略。
「見た目」と「構造」を分けて考え、再利用可能な部品としてCSSを書く 手法。

🔹 例：カードレイアウト

<div class="card">
  <img class="card__img" src="image.jpg" alt="">
  <p class="card__text">説明文</p>
</div>
/* 共通オブジェクト */
.card {
  border: 1px solid #ccc;
  padding: 10px;
}
.card__img {
  max-width: 100%;
}
.card__text {
  font-size: 14px;
}

👉 デザインが変わっても「共通オブジェクト」を流用できるのが強み。

📌 3. SMACSS（Scalable and Modular Architecture for CSS）

🔹 考え方

SMACSSは「拡張性」と「モジュール化」を重視した設計。
CSSを5つのカテゴリに分けて整理します。

  1. Base → 基本スタイル（html, body, a など）
  2. Layout → ページ全体のレイアウト（header, footer, sidebar）
  3. Module → コンポーネント単位（ナビゲーション、カードなど）
  4. State → 状態の変化（.is-active など）
  5. Theme → 色やデザインのバリエーション

🔹 例

/* State */
.is-active {
  display: block;
}

👉 大規模サイトに向いており、チームでの開発に適した設計方法。

📌 それぞれの比較

設計手法特徴向いているケース
BEM命名規則が明確、読みやすい中小〜大規模プロジェクト
OOCSS再利用性が高い、部品化しやすいコンポーネントが多いサイト
SMACSSカテゴリ分けで管理しやすい大規模開発、チーム開発

👉 実務では BEM＋OOCSSの考え方 を組み合わせるケースが多いです。

🎯 初心者がまず学ぶべきCSS設計は？

  1. BEMから始める → 命名規則がシンプルで理解しやすい
  2. OOCSSを取り入れる → 再利用性を意識する
  3. SMACSSを知っておく → 大規模開発で活かせる

👉 最初から完璧を目指さず、BEMでクラス名を整理すること が第一歩です。

📌 まとめ

  • CSS設計は「管理しやすいCSSを書くための考え方」
  • BEM → 命名規則で管理を楽に
  • OOCSS → 再利用性を高める
  • SMACSS → 規模の大きなサイトでも整理しやすい

👉 初心者はまず BEM を実践してみるのがおすすめです！

おすすめ記事

-CSS