CSS記述規則「プロパティ別整理法」の提案

はじめに

提案の目的

大中規模なCSSの記述作業において、不確かな拠り所に依存した記述方法から脱却し、CSSのメンテナンス作業を円滑にするためにこの「プロパティ別整理法」を提案します。

必須ツール

この提案を気に入られた方は、ぜひ蓄々CSS自動整形をお試しください。というか、蓄々CSS自動整形は新たにCSSを書き起こす際や、既にあるCSSをプロパティ別整理法に移行する際には必須になります。

注意点

尚、小規模なCSSは例外ケースとなります。

また、CSSを新たに構築する際もプロパティ別整理法で書き始めることは推奨されません。

多くのCSSは図書館方式で整理されている

私の印象では、多くのCSSは以下のルールで記述されています。

  • 一つのセレクタに複数のプロパティを与える。
  • 製作者の任意のグループ別に集める。
  • 製作者の任意の並び順で並べる。
  • 要するに「セレクタ基準」で整理している。

この文書内において、以上に基づいた整理法を図書館方式と呼びます。

図書館方式の例

/* 全般 */
body {
 background-color:#fff;
 color:#000;
}

/* ナビゲーション */
div.navigation {
 background-color:#fff;
 color:#555;
 font-size:80%;
}
div.navigation p {
 margin:1em 10%;
 padding:1ex;
}

/* コンテンツ */
div.contents {
 background-color:#e0e0e0;
 color:#333;
 font-size:100%;
}

実際はもっともっと巨大なCSSだと思って下さい。

分かり易い例ではないかもしれませんが、大規模な例として私が過去に作成したCSSも併せてどうぞ。

図書館方式の利点

  • 製作者の任意のグループごとのスタイルが把握し易い。
  • セレクタ毎のスタイルが把握し易い。

図書館方式の欠点

  • 「君の名は問題」が発生する。通常、グループには名前をつける。グループを作成する際は、その都度グループ名を考えなくてはならない。
  • スタイルを記述する際に、どのグループに含めるか考える必要がある。その判断は、製作者に委ねられる。
  • 「こうもり問題」が発生する。既存グループに属さないスタイルを記述しなくてはならないときに、グループを追加しなくてはならない。しかし、グループに属するまでもないスタイルの場合はその他グループに入れてしまう傾向がある。
  • 「複数属性問題」が発生する。複数のグループに属するスタイルが出現したとき、どちらかに入れるか、それとも新しいグループを追加するか悩む。
  • そもそも、どんなグループ or グループ名が存在するのか忘れてしまう。
  • 問題が顕著化したとき、スタイル変更時に変更対象の探索が困難になる。
  • 変更対象が巨大なCSSの場合、変更個所の探索は困難を極める。
  • 継承するスタイルの場合、HTMLに入れ子構造を採用しているとどのレベルで定義されているのか把握し辛くなる。
  • CSSが巨大になるとグループ分けが機能しなくなり、グループの中での並び順が重要になってしまう。

「君の名は問題」「こうもり問題」「複数属性問題」は深刻です。根本的な解決法が無いからです。そしてこの問題は徐々に顕著化していきます。

図書館方式の何が不満か

とにかく無駄な時間がかかることが不満です。

メンテナンス性の低さ、見栄えと関係の無い事象への負担が無視できないほどに大きいのです。これは、良いスタイルを目指す際の重い足かせとなっています。

プロパティ別整理法とは

絶対規則

  • １セレクタに記述できるプロパティは一種類のみ。
  • プロパティでグループする。
  • [セレクタ] { [識別名]:[値] }[改行] で記述する。
  • セレクタとプロパティは一行で記述する。

推奨規則

  • 同じプロパティでも、複数セレクタで記述しない。
  • セレクタは、文字コード順にソートする。
  • グループは、プロパティの文字コード順にソートする。

プロパティ別整理法の例

図書館方式の例を、蓄々CSS自動整形を用いて、プロパティ別整理法に基く記述に変換しました。

/* background-color */
body { background-color:#fff }
div.contents { background-color:#e0e0e0 }
div.navigation { background-color:#fff }

/* color */
body { color:#000 }
div.contents { color:#333 }
div.navigation { color:#000 }

/* font-size */
div.contents { font-size:100% }
div.navigation { font-size:80% }

/* margin */
div.navigation p { margin:1em 10% }

/* padding */
div.navigation p { padding:1ex }

私が過去に作成したCSSを整形した結果も併せてどうぞ。

プロパティ別整理法の利点

整理基準が自明であり、図書館方式に比べてメンテナンス時の負担が少ない点が特徴です。

  • 「君の名は問題」が発生しない。グループの名前はプロパティ名なため。
  • 記述先のグループはプロパティに基づくため、自明である。
  • 並び順はプロパティのアルファベット順に基づくため、自明である。
  • 「こうもり問題」「複数属性問題」が発生しない。前提として記述先のグループは必ず存在するため。
  • 整理基準がCSSの仕様に基づいているため、機械との親和性が高い。自動整形やGrep検索等に有利である。
  • 変更対象が巨大なCSSであったとしても、変更すべきプロパティさえ認識していれば変更個所の探索は容易である。
  • 絶対的であるが故に、共同作業をするときのレギュレーションとして利用できる。

プロパティ別整理法の欠点

  • 図書館方式に比べてCSSの記述量が増える傾向にある。
  • あるセレクタに対して、どのようなスタイルが指定されているか一望出来ない。（ただし、Grep検索によって解決することができる）
  • とっつきにくい。

プロパティ別整理法に近い例

私が提案する識別名別記述法に完全に合致していませんが、方向性は同じです。

機械との親和性

機械が完全に理解できる

プロパティ別識別法の手がかりは全てCSSの仕様によるものです。ということは、機械にも完全に理解できるということです。

蓄々CSS自動整形で既存のCSSをプロパティ別整理法で整理されたCSSへ変換することができます。ソートも行われますので視認性の向上が期待できます。お好みで同じプロパティを複数セレクタにまとめることもできます。是非ご利用ください。

蓄々CSS自動整形で、今日からプロパティ別整理法を

蓄々CSS自動整形とは

  • 拙作の蓄々CSS自動整形を使えば、既存のCSSをプロパティ別整理法で整理されたCSSへ一括変換することができます。
  • CSSのサイズを抑えたいニーズもあると思いますので、同じプロパティ値の場合は複数セレクタで記述するオプションを用意しました。是非お試し下さい。
  • 2005-03-07 セレクタ基準で整形するオプションを用意しました。

書き始めはプロパティ別整理法を用いることは推奨されない

CSSを新たに書き始めるときはメンテナンス性はほとんど必要ありません。図書館方式でも何でもよいですから、体裁を気にせずに頭の中にあるスタイルを一気に記述しましょう。メンテナンスを行うわけではないので、その方が早いです。最初からプロパティ別整理法を用いるのは不適当です。

それではどうするかというと、蓄々CSS自動整形を利用してください。だいたいのスタイルが完成してCSSのサイズが増えてきて調整が難しくなってきたときに、蓄々CSS自動整形で変換するとよいでしょう。作成はセレクタ基準、メンテナンスはプロパティ基準。これがスマートです。

ウェブサイト製作のステップと CSS 記法の選択 - 備忘録にてその理由が詳しく述べられています。

セレクタ別のスタイルを把握したいときは、セレクタ基準で整形

この文書を公開後に沢山の方々からご意見をいただき、セレクタ基準での整形も一定のニーズがあることがわかりましたので、蓄々CSS自動整形にセレクタ基準で整形するオプションを用意しました。セレクタ基準で記述する方式も、小規模なCSSであったり「慣れ」によってメンテナンス性が確保されている場合においては推奨できる方式です。

一瞬にしてセレクタ毎のスタイルが一望できるのは場合によっては便利だと思います。セレクタ名順にソートも行われるので、記述位置も発見し易い（筈）です。２つの方式を行き来できるエディタがあればそれはもう便利だと思います。

宜しければぜひ一度お試しください。

例外ケース

サイズの小さいCSSや、１セレクタに対して１スタイルで済むような場合ははわざわざプロパティ別整理法を使わなくてもよいでしょう。それだけでメンテナンス性は確保されています。

例外ケースについてCSS の記法 - 備忘録にて詳しく言及されています。