hamashun.com

超々有名人である上ノ郷谷さんややまざきさん が、CSSを記述する際のガイドラインを書いてらしたので、マネしてみようかと思います。
以下は最も新しい制作物である、このサイトでの記述方法です。

まずはコメントで、目次と更新履歴を記します。

/*
==========================TOC(Table Of Contents)==========================
nature style  Last Up 03 08 2006  Shuntaro Hama / workのimgをcssで表示

1:browser default style reset / body style / hr FIR / skip nav / link style / abbr  acronym style
2:framework style
3:all header style
4:all mainnavigation style
5:all maincontent style
6:all subcontent style
7:all footer style
===============================
	8:index onry style
	9:work onry style
	10:about onry style
	11:contact onry style
	12:link onry style
	
	13:blog onry style (for MT)
==========================================================================
*/

このサイトは、デザインの数だけ外部CSSが増加していくので、まずはどのデザインのファイルなのかを明記します。
そして更新履歴も書いておきます。

次に、アスタリスクを使ったブラウザスタイルの初期化や、hrのFIR等、細々していて一度指定すれば、後は触らないような物をまとめて記述します。

その後は、全ページで共通して使う枠組みのスタイルと、各ページで使用する細かいスタイルを記述します。
この２つの大きな違いは、bodyタグにIDを使って振り分けをするかしないか、という点です。

各ルールセットの記述方法

tag#id {
	property:value;
	property:value;
	property:value;
}

子孫セレクタを記述する時は特に、各IDとclassが適用されているタグも明記しておきます。 その方が後から見た時に、（X)HtmlとCSSの照らし合わせがしやすいと思うので。
インデントはタブで一度入れます。 僕が使っているエディタと、その使い方の癖で、閉じの中カッコはインデントされません。

各プロパティの記述順序

各ルールセットの中の記述順です。

1. 視覚整形モデル（positionやfloat、display等）
2. ボックスモデル（marginやwidht、border等）
3. バックグラウンド
4. カラー
5. フォント
6. テキスト
7. その他

Mozilla.orgが提案している物を基準にしています。
バックグラウンド以降は覚えにくいので、それぞれの頭文字をアルファベット順に並べて B→C→F→Tとしています。
overflowをどこに記述するかをずっと悩んでいたのですけど、視覚効果である事からして、バックグラウンドとカラーの間が最適かな？と最近思っています。

その他には、リストや生成内容や表が入ります。
このサイトでは殆ど使って無いので、まとめてしまっています。

cssファイルの分け方

@importを2回行って、NN4とIE4とMAC版IE4.5を排除しています。

@import url("main.css");

@import url("hack.css");

@media tty {i{content:"\";/*" "*/}}
@import 'wie5x.css'; /*";}}/* */

@media tty {i{content:"\";/*" "*/}};
@import 'wie50.css'; {;}/*";}}/* */

@media tty {i{content:"\";/*" "*/}}@m;
@import 'wie55.css'; {;}/*";}}/* */


/*\*//*/
@import "mac5.css";
/**/

Web標準に準拠したブラウザ用がmain.cssで、Opera、IE6、safari用のハックがhack.cssです。
IE5.xは各バージョンごとに読み込ませています。

その他の細かい事

ショートハンドは基本的に使用しますが、fontのみ使用しません。
その理由は、font-familyを省略できないからで、ミスや冗長になるのを防ぐ為です。
また、ハックで一部分にのみ指定したい場合も使いません。
line-heightは、分類上はボックスモデルに属しますが、fontタグでのショートハンドでも指定できます。
単体で指定する際は、どちら側にするか迷う所ですが、分類通りに扱うのが無難かも？しれません。

カラーコードは、セーフカラーであっても6文字で書きます。 統一感があった方が良いかなと思うので。
目次の次に、カラーコードをメモしておく事もあります。 borderの線の種類等も合わせて記しておくと、コピペの時に便利です。