大中規模なCSSの記述作業において、不確かな拠り所に依存した記述方法から脱却し、CSSのメンテナンス作業を円滑にするためにこの「プロパティ別整理法」を提案します。必須ツールこの提案を気に入られた方は、ぜひ蓄々CSS自動整形をお試しください。CSSは例外ケースとなります。CSSを新たに構築する際もプロパティ別整理法で書き始めることは推奨されません。多くのCSSは図書館方式で整理されている私の印象では、多くのCSSは以下のルールで記述されています。一つのセレクタに複数のプロパティを与える。製作者の任意のグループ別に集める。製作者の任意の並び順で並べる。要するに「セレクタ基準」で整理している。この文書内において、以上に基づいた整理法を図書館方式と呼びます。font-size:100%;}実際はもっともっと巨大なCSSだと思って下さい。分かり易い例ではないかもしれませんが、大規模な例として私が過去に作成したCSSも併せてどうぞ。製作者の任意のグループごとのスタイルが把握し易い。セレクタ毎のスタイルが把握し易い。「君の名は問題」が発生する。通常、グループには名前をつける。グループを作成する際は、その都度グループ名を考えなくてはならない。スタイルを記述する際に、どのグループに含めるか考える必要がある。その判断は、製作者に委ねられる。「こうもり問題」が発生する。既存グループに属さないスタイルを記述しなくてはならないときに、グループを追加しなくてはならない。複数のグループに属するスタイルが出現したとき、どちらかに入れるか、それとも新しいグループを追加するか悩む。グループ名が存在するのか忘れてしまう。問題が顕著化したとき、スタイル変更時に変更対象の探索が困難になる。変更対象が巨大なCSSの場合、変更個所の探索は困難を極める。継承するスタイルの場合、HTMLに入れ子構造を採用しているとどのレベルで定義されているのか把握し辛くなる。CSSが巨大になるとグループ分けが機能しなくなり、グループの中での並び順が重要になってしまう。根本的な解決法が無いからです。この問題は徐々に顕著化していきます。図書館方式の何が不満かとにかく無駄な時間がかかることが不満です。メンテナンス性の低さ、見栄えと関係の無い事象への負担が無視できないほどに大きいのです。これは、良いスタイルを目指す際の重い足かせとなっています。プロパティ別整理法とは絶対規則1セレクタに記述できるプロパティは一種類のみ。プロパティでグループする。セレクタとプロパティは一行で記述する。同じプロパティでも、複数セレクタで記述しない。セレクタは、文字コード順にソートする。グループは、プロパティの文字コード順にソートする。図書館方式の例を、蓄々CSS自動整形を用いて、プロパティ別整理法に基く記述に変換しました。}私が過去に作成したCSSを整形した結果も併せてどうぞ。整理基準が自明であり、図書館方式に比べてメンテナンス時の負担が少ない点が特徴です。「君の名は問題」が発生しない。グループの名前はプロパティ名なため。記述先のグループはプロパティに基づくため、自明である。並び順はプロパティのアルファベット順に基づくため、自明である。前提として記述先のグループは必ず存在するため。整理基準がCSSの仕様に基づいているため、機械との親和性が高い。自動整形やGrep検索等に有利である。変更対象が巨大なCSSであったとしても、変更すべきプロパティさえ認識していれば変更個所の探索は容易である。絶対的であるが故に、共同作業をするときのレギュレーションとして利用できる。図書館方式に比べてCSSの記述量が増える傾向にある。あるセレクタに対して、どのようなスタイルが指定されているか一望出来ない。(ただし、Grep検索によって解決することができる)とっつきにくい。私が提案する識別名別記述法に完全に合致していませんが、方向性は同じです。W3C(ユーザースタイルシートのススメ)機械との親和性Grep検索を活用するあるセレクタのスタイルをGrep検索によって一気に抽出することができます。特定のセレクタに限らず抽出することもできます。プロパティ別整理法の例から、div.navigationセレクタのスタイルを一望したいとしましょう。秀丸エディタのGrep検索を使い、検索してみます。{となっていることに注目してください。結果は以下の通りです。思惑通り、div.navigationセレクタのスタイルを抽出することが出来ました。}次に、検索文字列をdiv.navigationとして検索してみましょう。結果は以下の通りです。pセレクタも抽出されました。これをうまく活用することで、関連するセレクタのスタイルを一気に抽出することができます。これらの例は小さなCSSを対象としているのでGrep検索の必要性は低いですが、巨大なCSSから抽出するときに非常に強力な手段となり得ます。Grep検索のためにスタイルは一行に収めて記述することを推奨します。機械が完全に理解できるプロパティ別識別法の手がかりは全てCSSの仕様によるものです。いうことは、機械にも完全に理解できるということです。蓄々CSS自動整形で既存のCSSをプロパティ別整理法で整理されたCSSへ変換することができます。ソートも行われますので視認性の向上が期待できます。お好みで同じプロパティを複数セレクタにまとめることもできます。蓄々CSS自動整形で、今日からプロパティ別整理法を蓄々CSS自動整形とは拙作の蓄々CSS自動整形を使えば、既存のCSSをプロパティ別整理法で整理されたCSSへ一括変換することができます。CSSのサイズを抑えたいニーズもあると思いますので、同じプロパティ値の場合は複数セレクタで記述するオプションを用意しました。セレクタ基準で整形するオプションを用意しました。書き始めはプロパティ別整理法を用いることは推奨されないCSSを新たに書き始めるときはメンテナンス性はほとんど必要ありません。図書館方式でも何でもよいですから、体裁を気にせずに頭の中にあるスタイルを一気に記述しましょう。メンテナンスを行うわけではないので、その方が早いです。最初からプロパティ別整理法を用いるのは不適当です。それではどうするかというと、蓄々CSS自動整形を利用してください。だいたいのスタイルが完成してCSSのサイズが増えてきて調整が難しくなってきたときに、蓄々CSS自動整形で変換するとよいでしょう。作成はセレクタ基準、メンテナンスはプロパティ基準。備忘録にてその理由が詳しく述べられています。セレクタ別のスタイルを把握したいときは、セレクタ基準で整形この文書を公開後に沢山の方々からご意見をいただき、セレクタ基準での整形も一定のニーズがあることがわかりましたので、蓄々CSS自動整形にセレクタ基準で整形するオプションを用意しました。セレクタ基準で記述する方式も、小規模なCSSであったり「慣れ」によってメンテナンス性が確保されている場合においては推奨できる方式です。一瞬にしてセレクタ毎のスタイルが一望できるのは場合によっては便利だと思います。セレクタ名順にソートも行われるので、記述位置も発見し易い(筈)です。2つの方式を行き来できるエディタがあればそれはもう便利だと思います。宜しければぜひ一度お試しください。例外ケースサイズの小さいCSSや、1セレクタに対して1スタイルで済むような場合ははわざわざプロパティ別整理法を使わなくてもよいでしょう。それだけでメンテナンス性は確保されています。備忘録にて詳しく言及されています。パソコン遊戯日記~2005年3月これは言えてますねぇ。私もメンテナンス性の高い書き方を考えてみることにしよう。プロパティ別整理法に乗っかってみる蓄々CSS自動整形にて整形してみました。うん、なるほどbeautifier!。この方式に慣れてしまえば、後から弄りやすいかもしれません。蓄々CSS自動整形ふむ。2005-03-05これは同じ値のプロパティを持っていても別の宣言として記述するらしい(中略)それゆえ図書館方式に比べてCSSの記述量が増える傾向にあるけれども、これでメンテナンス性は高くなると。どちらの方式でも表示できて、保存する時に記述量を最適化してくれるCSSエディタが欲しいと少し思った。蓄々CSS自動整形では、同じ値のプロパティを持っている場合に同じ宣言として整形してくれるオプションがありますので、如何でしょうか。エディタ向けにASPとして提供してもいいかもしれません。スクリプト(php)の公開も考えています。欠点の部分を読むと、確かに身に覚えのある部分が。私もこれを一度やったのですが、直感的に分かりづらいですし、行数がものすごいことになったのでやめたんです。GREP検索なんてその当時は知りませんでしたし(苦笑)つまり、この項目で言いたいことは「GREP検索を使うのであれば『プロパティ整理法』は普通に書くよりいいんじゃないか?」ということを発見させられたという話です。Grep検索なんてまどろっこしいものではなく、セレクタを選択するとそのセレクタに設定されている全てのプロパティがツールチップでポップアップ表示されるエディタがあればさらに便利なんですが...。色関連と表示関連を別ファイルにしたりもしてきたけれど、ここまで徹底した記述はある意味すごいかも。試してみたくなったので、蓄々CSS自動整形で作ってみて、これから試してみます。備忘録プロパティ別整理法は損益分岐点が高いので、要注意。私は過去に3回挑戦して、ことごとく失敗しました。いつも簡単なものでしかなかったからです。あきやんさんのいう図書館方式の欠点は、あくまでもヘビーなカススタイラーの抱える問題。私には関係ないのでありました。導入の際はよく注意すべきですね。ヘビーなカススタイラーの抱える問題とは、その通り。簡単なCSSでサイズが小さければそれだけでメンテナンス性は確保されますから、どんな方式でもよいでしょう。公開後にそのことに言及していないことに気づいて、2005-03-05の深夜に例外ケースの節を追加しましたが、行き違いになってしまったようです。ファイルが肥大化なんてするはずがない。要素なんかを駆使して、同じ種類の要素に対して全然違うスタイルを指定しようとすること自体に問題がある。基本的には、1要素型につきスタイル指定は1回でよいのだし、であれば図書館方式さえ必要ない。グループ化とか分類とか、そんなことは一切していない。書くのに、そんなことをいちいち考える方が面倒くさい。......というレベルの方は、少なくないと思う。それで別にいいんじゃないかと。はい、それで別にいいと思います。1要素に対して1スタイルで済む場合は、複数のプロパティを持たせるほうが遥かにメンテナンス性は高いと思います。的確なご意見を下さり、有難うございました。備忘録たいていの方は前者(作者注:セレクタを基準に整理)を用います。一般に「直感的にわかりやすいから」と説明されますが、それでは言葉が足りないでしょう。書き上げていく段階において、セレクタを基準に整理していく方が自然だから」となるのではないでしょうか。整理する基準をセレクタからプロパティへ変更することには大きな意義があるわけです。いえ、従来、それは難題でした。再整理する試みがたいてい成功しなかったのは、手作業ではあまりにも面倒だからです。書く不自然さ・わかりにくさといったらない。あきやんさんは、ここにひとつの技術革新をもたらしました。プロパティ基準へ自動で再整理するツールです。プロパティ別整理法において蓄々CSS自動整形は必須だということを、今までさんざんテストしてきた自分自身が忘れていました。CSSを新規に構築する際にプロパティ別整理法を最初から用いるのはむしろ推奨されないことは、強く書くべきでした。私も初期の段階で経験しました。私にはプログラムと正規表現の心得があったので、ツールを作成するのは難しいことではありませんでした。ツールを完成させたのは一年前でした。一年間使い続けて便利だと確信したので、この文書とツールの公開に踏み切った次第です。(実は、この文書も一年前にほぼ完成していました)再々のご意見、ありがとうございました。小規模なんで問題ない、というかスタイルシートを1ファイルにする必要はないでしょ?要するに機能分割やネーミングなどをちゃんとしてないからグチャグチャになるってことじゃないかしら?機能分割やネーミングにかかる時間がもったいない、と考えています。ネーミングするまでもないものや、複数のグループに属するようなスタイルが発生した場合、頭を抱ることになるでしょう。どこに記述したのか忘れてしまうこともあります。小規模な場合は問題ありません。...というのは、普段から整理整頓していれば、という発想かと思います。したカスタムスタイルでついつい整理せずに記述してしまい、収集がつかなくなったり、整理するのが面倒くさくなることはままあります。図書館方式は整理したときは完璧に整理されているのですが、エントロピーは増大していくのです。プロパティ別整理法ならエントロピーの増大は小さく抑えられますし、自動整形で一発リセットすることができます。スタイルシートを1ファイルにする必要は提案していません。私もglobal.cssを基本としてcontent.cssなどを派生として作成する継承方式を採用していますので、スタイルシートを複数ファイルに分けて管理することは自然だと思います。日これ(2005-03-06)非常に面白く、かつ実用的なアイデアだと思います。モード)があれば便利でしょうね。部分より大きく勝る利点が、自分的には少ないかな。結局、自分の頭の中で処理できる程度のグループ分けしかしていないので、グループごと、というよりセレクタごとのスタイルを把握しにくいのは大きなマイナス点でした。Grep検索よりもっと簡単な操作で、これらの表示を切り替えられればいいのかもしれない、とちょっと思ったりしました。蓄々CSS自動整形にセレクタ基準で整形するオプションを用意しました。ご意見、ありがとうございました。CSS記述規則「プロパティ別整理法」の提案メモ。