CSSコーディング・スタイル

Posted at 2006-08-20T18:33:00+09:00 in Web Design

「こういうスタイルがCSSを記述する時に便利だよ！コンセンサス(つづりは知らない)も取れるし！」とかいう建設的な意見はまるでないんですが、CSSを書く時の自分ルールは結構あるのでまとめがてらエントリにする。もちろんhxxk.jpのCSS の記述ルール記事のまとめというエントリを見たから書く気になったんだけど。

とりあえずスタイル指定を取っ払う

各ブラウザ間でのデフォルトの状態での差異を考えると頭が痛くなってくるので、手始めに取っ払って勝負。

フォント・ファミリの指定は別ファイル

見出しはこのフォントで本文はこのフォントといったように、フォント・ファミリの指定はいろいろな要素にまとめて指定することが多いので、まとめて別ファイルに。

様々なところで使うスタイルはhiddenやwrapperなどというクラスでまとめる

CSS側でこの要素ではclear: both;とかいうのでも良いのだけど、こういったものは比較的良く使うので、クラスとしてまとめておく。クラス名は複数持てるので、class="adsense wrapper"などといった感じでHTML側で利用。また、こういったルールはCSSファイルの最初の方に書いておく。

セレクタを書く順はHTMLファイル内で出てくる順

フッタ関連の指定は下の方にあるとか、把握しやすいので。

セレクタはこれでもかと細かく指定

div#contents div.story form dl dd select optionとかいった感じ。セレクタを見ればどういう指定かほぼ確実にわかるので、読解の上での利点ははかりしれない(大げさ)。書くのはかなりメンドイ。

{と}の後で必ず改行

たとえプロパティがひとつしかなくても改行。一貫していれば、読みやすいと思う。

省略形のプロパティは使わない

省略形はどういう順番で書くものかおぼえてないから。例外はmarginとpaddingで、これらはまとめて書くことが多くいちいち書くのは大変だから。ちょっと一貫性がない。

プロパティを書く順序はCSS2 Specificationで出てくる順

何人かでひとつのCSSファイルを編集していたときに確立されたルール。記述の上での利点はとくにはないが、読解の上では利点がある。

こんなところ。

PHP版のCSSTidyを利用したフォーマッターを作ってみようかなとか思った。思っただけ。CSSTidyの--sort_propertiesオプションがもっとこうアレな感じだったら便利なのに。