記事本文
CSS の記述ルール
いまだに私自身「これだ ! 」という答えを見出していないのですが、 CSS の記述ルールって絶対的な正解ってありませんよね ? ちょっと私が知っている範囲で明文化されている CSS の記述ルールを集めてみましたので、それを元に絶対的な正解のルールではなく、最大公約数的なルールを模索してみたいと思います。
ちなみに、今回模索するのは Lucky bag::blog: CSS を作成する際のお約束やデフォルトスタイルの差異を無くすCSS のような Tips ではなくて、あくまで .css ファイルを書き上げる際のルールのことです。 それと、取り上げた記事は順不同です。 書き上げてから、公開日時順にした方が良かったかなあとも思いましたがもうこのままで公開。
- Type selectors を XHTML Abstract Modules の順番に沿って記述 - hxxk.jp
- ガイドラインを作成および公開・共有し、ルールの統一 - 2xup
- セットフォーマットを厳密に定義して可読性を高める - orz.cc
- CSS2 Specification の記述順を元にプロパティの記述順を決定 - pur*log
- W3C の CSS の記述順を元にプロパティの記述順を決定 - LIPPiN
- HTML の階層構造に合わせて CSS の記述もインデントする - Lucky bag::blog
- .css ファイルの先頭にルールを明確に記述しておく - Code-404
- CSS の自分ルール - nulog
- その他関連しそうなリソース
- 模索結果
Type selectors を XHTML Abstract Modules の順番に沿って記述 - hxxk.jp
まず、私が採用している手法。 CSS のセレクタ ( この場合は class や id を付加しない Type selectors のことを指すことにします ) を書く順番というのは、特に決まったルールはありません。 ( 本当はもう少し細かいのですが ) 後から書かれた方がより優先されるため、最初に html や body などの大まかなセレクタを書いて、後からあまり使わないような部分を書いて……という方法を採っていました。 しかし、それだと後から CSS をメンテナンスする時に「あれ、あのセレクタはどこに書いていたっけ ? 」ということが起こります。 そこで、何か記述順のルールというか指標が無いかなあと思って採り入れたのが、 XHTML Abstract Modules の順番に沿ってセレクタを記述していく方法です。
hxxk005.css を見ていただければ分かりますが、 Structure Module から始まって Legacy Module ( 実際には使っていませんが ) で終わるように記述しています。
3ping.org のうーたんも
真琴さんのCSSをこっそり覗き見してモノマネして
くれているらしく、 デフォルトスタイルの差異を無くすCSS で紹介されている default.css でも同じ方法を採用しているようです。
更にこの CSS では先頭にモジュールの簡易目次を書いているので、いずれこれを逆輸入しようかな。
ガイドラインを作成および公開・共有し、ルールの統一 - 2xup
スタイルシートを書く時のガイドライン - 2xup にて、セットフォーマット ( インデントをどうするか、スペースをいくつ空けるかなど ) やプロパティの順序をどのように決めているかを公開しています。
このファイルは共有するので、独自にカスタマイズしてオリジナルのガイドラインをつくるサンプルとしてご利用ください。
もっと良い考えがあるかもしれないし、ミスや理解不足もあるかもしれないのでそういったご指摘も歓迎です。
そしてそれを元に何かフィードバックなどをいただければ、それはステキですね
ということで、今後の充実が期待されます。
また、スタイルシートを書く時のガイドライン - 2xup へのトラックバックや更にそのリンク先から、次のような CSS ルールに関する記事を辿ることができます。
セットフォーマットを厳密に定義して可読性を高める - orz.cc
CSS の閲覧用整形ガイドライン < Black Box という記事があったのですが、現在見られません。 いつかまた見られるようになることを期待してメモ。
CSS2 Specification の記述順を元にプロパティの記述順を決定 - pur*log
CSSで見やすくメンテナンスしやすいコードを記述するための自己流ルール - pur*log では、 CSS2 Specification ( 実際は邦訳版の方を参考にしているようですが ) に書かれている
解説を順番に読んでみて、視覚系ブラウザに必要なプロパティかつ、現状普及している主要ブラウザで解釈できるプロパティをざっと順番に抜き出して
プロパティの記述順を決定しているようです。
W3C の CSS の記述順を元にプロパティの記述順を決定 - LIPPiN
LIPPiN - プロパティの書き順@脳内ルールでは、 W3C の CSS の記述を参考にし、また mozilla.org Base Styles の記述も参考にしてプロパティの記述順を決定しているようです。
HTML の階層構造に合わせて CSS の記述もインデントする - Lucky bag::blog
Lucky bag::blog: CSS の可読性を高めるためのアイデアでは、 HTML ブロックレベルの階層に合わせてセレクタをインデントして書くという方法が紹介されています。
.css ファイルの先頭にルールを明確に記述しておく - Code-404
これは実際の .css ファイルに書いてあって「おおー ! 」と思ったものです。
Code-404 の square.css からインポートされている dont-forget-the-rules.css という CSS には、
ルールを忘れるな
という直球タイトルのルールが記述されています。
その内容を見てみると
- プロパティの出現順序
- セレクタの記述
- プロパティと値の記述
- 値の記述
- コメントの記述
- 特殊なルール
- 全スタイルのリセット
といったルールが羅列されています。 また、 square.css の方の先頭部分にはカラースキームやセレクタの目次も書かれていますので、合わせて参考にすると良いでしょう。
CSS の自分ルール - nulog
CSS で面倒くさいのは < 13 < July < 2006 < nulog, NULL::something : out of the headphone に、記述ルールと実際に記述された CSS が公開されています。
その他関連しそうなリソース
記述ルールからは少し逸れますが、関連しそうなリソースを挙げておきます。
……なんだか Lucky bag::blog ばかりですね。 辛うじて hxxk.jp の派生記事が入っていますが。
模索結果
最大公約数的なルールを模索した後に、 hxxk.jp の CSS をリファクタリングして実例としてみようと思いましたが、まとめてみたら意外と多くなったので、それはまた別の記事に機会を譲ろうかと思います。
