CSS設計 - CSS

  • 作成日：
  • 最終更新日：2026/02/04

よいCSS設計が目指す4つのゴール

  • 予測できる
  • 再利用できる
  • 保守できる
  • 拡張できる

予測できる

新しいスタイリングを追加したり、既存のスタイリングを更新しても、意図しない箇所に影響を与えないように設計をする

再利用できる

スタイリングは抽象化されて、適切に分離差ｒている必要がある

保守できる

新しいモジュールや機能を追加・更新しても既存のCSSのリファクタリングする必要がない状態

拡張できる

一人でもチームでも問題なく管理できる状態

CSSの設計の規則はわかりやすく、学習コストが極端に高くない状態である必要があります

設計手法

設計手法には以下のようなものがあります。

  • OOCSS
  • SMACSS
  • BEM
  • PRECSS

上記の設計手法は以下の内容のうちどれかに該当するものがあります。

  • 特性に応じてCSSを分類する
  • コンテンツとスタイリングが疎結合（同士の依存関係が弱く、互いの独立性が高い状態）である
  • 影響範囲が広すぎない
  • 特定のコンテキストにむやみやたらに依存していない
  • 詳細度がむやみやたらに高くない
  • クラス名から影響範囲がわかる
  • クラス名から見た目・機能・役割がわかる
  • 拡張しやすい

初心者〜個人開発なら BEM、チーム開発・設計重視なら PRECSS（ITCSS + 命名規則）が使いやすい。

項目 BEM PRECSS
長所
  • ルールが単純
  • HTML を見ただけで構造がわかる
  • CSS が壊れにくい
  • React や Vue とも相性がいい
  • 大規模でも破綻しにくい
  • 役割別（Object / Component / Utility）で整理できる
  • チームでの保守性が高い
短所
  • クラス名が長くなりがち
  • HTML がわかりずらくなる
  • 学習コストが高い
  • 最初は「考えること」が多い
  • 小規模だとオーバー設計になりがち
向いているケース
  • 個人開発 / 小〜中規模サイト
  • 大規模でも破綻しにくい
  • 役割別（Object / Component / Utility）で整理できる
  • チームでの保守性が高い

リセットCSS

リセットCSSには以下のようなものがあります。

css-wipe はCDNで読み込んで利用することができます。