デザインと並行してコーディングを進めざるを得ない案件では、
デザインの全貌がわからないままコーディングを進めなくてはならない場合があるため、例外スタイルの多発でCSSが煩雑化し、設計が破綻しやすい。（デザイナー含む）

デザイナー「このページだけ例外で、ボタンのmargin-topを○○pxにして欲しい。」× ∞

そんな場合に例外スタイルを管理して、設計が破綻しにくく、効率良くコーディングを進めるCSSの書き方。

基本設計

HTMLとCSSの基本設計。

HTML

ページ識別用のclassを付与する。（CSSシグネチャ）
（例：<body>にclass="page-xxx"）

CSSシグネチャとは、ページのbodyなどにidやclassを設定し、 CSSでページごとのスタイルの切り替えを行う手法です。

a.html

<body class="page-a">
  <div class="foo">
    <p>ふー</p>
    <button class="btn" type="button">ボタン</button>

b.html

<body class="page-b">
  <div class="bar">
    <p>ばー</p>
    <button class="btn" type="button">ボタン</button>

CSS

CSS大きく分けて共通CSSとページ固有CSSの２つ。

CSS構成

├── common.scss　…共通CSS
├── page-a.scss　…ページ固有CSS（例：aページ用CSS）
├── page-b.scss　…ページ固有CSS（例：bページ用CSS）

common.scss

// 例）共通ボタン コンポーネント ---------
.btn {
  margin-top: 10px;
  width: 100px;

  // バリエーション -------
  &.btn-s {
    margin-top: 5px;
    width: 50px;
  }

  &.btn-l {
    margin-top: 20px;
    width: 200px;
  }
}

page-a.scss

// 例）a.htmlにしかない要素
.foo {
  background: red;
  width: 500px;
}

コーディングの進め方

デザイナー「ページAだけ例外でボタンのmargin-topを30pxにして欲しい。」

Badパターン

1.ページ固有CSSの記述する。

page-a.scss

.hoge {
  background: red;
  width: 500px;
}

.btn {
  margin-top: 30px;
}

同じセレクターに対するスタイルを複数のCSSに記述すると、スタイルを俯瞰して見にくくなり、煩雑化して保守性が低くなる。

2.共通CSSにバリエーションを増やす。

common.scss

.btn {
  margin-top: 10px;
  width: 100px;

  // バリエーション -------
  &.btn-s {
    margin-top: 5px;
    width: 50px;
  }

  &.btn-l {
    margin-top: 20px;
    width: 200px;
  }

  &.btn-mt-l {
    margin-top: 30px;
  }
}

例外スタイルに対してバリエーションを増やすと、バリエーションの管理が煩雑化して保守性が低くなる。

Goodパターン

ページ識別用のclassで共通CSSを上書きする

common.scss

.btn {
  margin-top: 10px;
  width: 100px;

  // バリエーション -------
  &.btn-s {
    margin-top: 5px;
    width: 50px;
  }

  &.btn-l {
    margin-top: 20px;
    width: 200px;
  }

  // 例外 ---------------
  .page-a & {
    margin-top: 30px;
  }
}

Goodパターンで制作を進めることで、例外スタイルを管理がしやすくなり、
以下のようなタイミングでスムーズにリファクタリングを実行できるようになる。

リファクタリングを実行するタイミング

common.scss

.btn {
  margin-top: 10px;
  width: 100px;

  // バリエーション -------
  &.btn-s {
    margin-top: 5px;
    width: 50px;
  }

  &.btn-l {
    margin-top: 20px;
    width: 200px;
  }

  // 例外 ---------------
  .page-a &,
  .page-c &,
  .page-d & { // ケース1
    margin-top: 30px;
  }

  .page-e & { // ケース2
    margin-top: 32px;
  }

  .page-f &,
  .page-g & { // ケース3
    margin-top: 50px;
  }
}

ケース1
3回以上同じパターンが出てきた場合、バリエーションとして設計し直す。

ケース2
プロパティの値が別のスタイルの僅差の場合、上記にスタイルに統合出来ないかデザイナーに確認する。

ケース3
3回以下の場合は、まだ例外としておく。

まとめ

複数のCSSに同じセレクターのスタイルを書かない。
例外スタイルを俯瞰して管理する。
同じ例外スタイルが3回出てきた時にバリエーションとして整理する。

上記の３点を意識しておくことで、デザイン上で例外スタイルが多発しても設計が破綻しにくいCSSを書くことできる。

設計が破綻しにくいCSSの書き方

基本設計

HTML

CSS

コーディングの進め方

Badパターン

Goodパターン

まとめ