Edited at

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

More than 1 year has passed since last update.

デザインと並行してコーディングを進めざるを得ない案件では、

デザインの全貌がわからないままコーディングを進めなくてはならない場合があるため、例外スタイルの多発で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の2つ。


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回出てきた時にバリエーションとして整理する。

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