お問い合わせ
お問い合わせ
ホーム > CSS > CSS設計とは？保守しやすいスタイルを書く基本を解説

CSS設計とは？保守しやすいスタイルを書く基本を解説

CSS
レイヤー構造で整理されたWebサイト設計とCSSコンポーネント管理を表現したイラスト
CSS設計の考え方とBEM・FLOCSSによる保守しやすいスタイル管理をイメージしたビジュアル

Webサイト制作では、ページ数や機能が増えるにつれてCSSの管理が難しくなります。

最初は数十行だったCSSも、運用を続けるうちに数千行へ膨れ上がり、「どこを修正すればよいかわからない」「修正したら別の箇所が崩れた」といった問題が発生しやすくなります。

こうした問題を防ぐために重要なのがCSS設計です。

CSS設計を理解すると、複数人での開発や長期運用でも管理しやすいコードを書けるようになります。

この記事では、CSS設計の基本から代表的な設計手法、実践方法までわかりやすく解説します。

CSS設計とは

CSS設計とは、CSSを保守しやすく再利用しやすい構造で管理するためのルールや考え方です。

単にスタイルを書くのではなく、将来的な修正や機能追加を見据えてCSSを整理します。

例えば、以下のような問題を防ぐことが目的です。

  • 同じスタイルを何度も書いている
  • 修正すると別の箇所が崩れる
  • クラス名の意味がわからない
  • CSSファイルが肥大化する
  • チーム開発でルールが統一されない

CSS設計は大規模サイトだけでなく、小規模なWebサイトでも効果があります。

CSS設計が重要な理由

保守性が向上する

CSS設計を行うと、どこに何のスタイルがあるのか把握しやすくなります。

そのため、後から修正する際の負担を大きく減らせます。

再利用しやすくなる

共通パーツを設計しておけば、同じコードを何度も書く必要がありません。

開発効率の向上につながります。

チーム開発しやすくなる

複数人で開発する場合、ルールが統一されているとコードの理解が容易になります。

担当者が変わっても保守しやすい状態を維持できます。

CSSの肥大化を防げる

設計なしでCSSを書き続けると、不要なコードが増えていきます。

CSS設計を行うことで、整理された状態を保ちやすくなります。

CSS設計で意識したい基本原則

役割を分離する

見た目や用途ごとに責務を分けます。

例えば以下のような分類です。

  • レイアウト
  • コンポーネント
  • ユーティリティ

役割を明確にすることで管理しやすくなります。

再利用を前提にする

特定のページだけで使うクラス名ではなく、複数箇所で使える設計を意識します。

悪い例です。

<div class="top-page-button">
  送信
</div>

良い例です。

<div class="button">
  送信
</div>

詳細度を上げすぎない

CSSの詳細度（Specificity）が高くなると、後から上書きしにくくなります。

悪い例です。

main .content ul li a.button {
  color: #fff;
}

シンプルなクラス指定が理想です。

.button {
  color: #fff;
}

CSS設計で有名な手法

CSS設計にはさまざまな考え方があります。

ここでは代表的なものを紹介します。

OOCSS

OOCSS（Object Oriented CSS）は、オブジェクト指向の考え方をCSSへ取り入れた設計手法です。

特徴は以下の2つです。

  • 構造と見た目を分離する
  • コンポーネントを再利用する

ボタンやカードなどを部品化して利用します。

SMACSS

SMACSSはCSSをカテゴリごとに分割して管理する手法です。

主な分類は以下の通りです。

  • Base
  • Layout
  • Module
  • State
  • Theme

大規模サイトで採用されることが多い設計です。

BEM

BEMは現在もっとも広く利用されているCSS設計の一つです。

以下の3つで構成されます。

  • Block
  • Element
  • Modifier

例です。

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

Modifierを追加する場合です。

<div class="card card--large">
  <h2 class="card__title">タイトル</h2>
</div>

BEMについて詳しく知りたい場合は「BEMとは？CSS設計でよく使われる命名規則を解説」も参考になります。

FLOCSSとは

日本のWeb制作現場で特によく利用されている設計手法がFLOCSSです。

FLOCSSは以下の3層構造で管理します。

Foundation

サイト全体の基本設定です。

例

  • リセットCSS
  • 共通フォント
  • 基本設定

Layout

ページ全体の骨組みを管理します。

例

  • header
  • footer
  • main
  • sidebar

Object

再利用するパーツを管理します。

さらに以下に分かれます。

  • Component
  • Project
  • Utility

構造が明確なため、大規模案件でも管理しやすいのが特徴です。

FLOCSSのディレクトリ例

実際の構成例です。

css/
├── foundation/
│   ├── reset.css
│   └── base.css
├── layout/
│   ├── header.css
│   ├── footer.css
│   └── main.css
├── object/
│   ├── component/
│   │   ├── button.css
│   │   └── card.css
│   ├── project/
│   │   └── news.css
│   └── utility/
│       └── utility.css
└── style.css

ファイルを用途ごとに整理できるため、管理が容易になります。

実践的なCSS設計の例

ボタンコンポーネント

HTMLです。

<a href="#" class="c-button">お問い合わせ</a>

CSSです。

.c-button {
  display: inline-block;
  padding: 12px 24px;
  color: #fff;
  background-color: #333;
  text-decoration: none;
  border-radius: 4px;
}

バリエーションを追加する

HTMLです。

<a href="#" class="c-button c-button--primary">
  お問い合わせ
</a>

CSSです。

.c-button {
  display: inline-block;
  padding: 12px 24px;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

.c-button--primary {
  background-color: #0077cc;
}

共通部分と差分を分離できるため、管理しやすくなります。

CSS設計で避けたい書き方

IDセレクタ中心の設計

以下のような書き方は再利用しにくくなります。

#header {
  background: #333;
}

クラスを利用する方が柔軟です。

.l-header {
  background: #333;
}

ネストを深くしすぎる

悪い例です。

.main .news ul li a span {
  color: red;
}

シンプルなクラス設計が推奨されます。

.news__label {
  color: red;
}

ページ専用クラスを乱用する

ページごとに似たスタイルを量産すると保守性が低下します。

共通化できる部分はコンポーネント化することが重要です。

CSS設計を学ぶ前に理解しておきたい知識

CSS設計を学ぶ前に、基本的なCSSの仕組みを理解しておくことが大切です。

以下の記事も参考になります。

まとめ

CSS設計とは、保守しやすく再利用しやすいCSSを書くための考え方です。

CSS設計を導入することで、以下のようなメリットがあります。

  • 保守性が向上する
  • 再利用しやすくなる
  • チーム開発しやすくなる
  • CSSの肥大化を防げる

代表的な設計手法には、OOCSS・SMACSS・BEM・FLOCSSがあります。

特にBEMやFLOCSSはWeb制作現場でも広く採用されているため、まずはこの2つを理解することがおすすめです。

CSS設計を意識してコーディングすることで、長期運用にも耐えられる品質の高いスタイル管理ができるようになります。

関連記事