ブラウザ間のアレなんだから、あんまり CSS 書くこと自体を面倒くさいことにしないほうがいいよね、って思うんだ。
ところで自分が CSS を書くときに気をつけていることを書くよ!
- 必ずルールをインデントする (TAB インデント)
- セレクタを複数書く場合は最後以外改行する
- 規則のあとには必ずセミコロンを入れる (最後も)
- 最後のルールのあとも改行する
- 宣言ブロック間はホワイトラインを入れる
- border, border-style, border-color, border-width 以外の border 系プロパティを極力使わない
- font プロパティを使わない。
- list-style 以外の list 系プロパティを極力使わない
- margin, padding 以外の margin, padding 系プロパティを極力使わない
- background 以外の background 系プロパティを極力使わない
- 宣言ブロックは基本的に HTML の構造順に書く
- 構造に関係ないやつ (ID 選択子を含まないもの) は上のほうに書く
- インライン要素 (span, a), ブロック要素 (p, ol), どっちでも要素 (ins, del), 置き換え要素 (img, input) の順に書く (しかしそんなに厳密に考えない)
- ID 指定の場合、下位の要素に ID が指定されていても、上位 ID をあまり省略しない (CSS 読むだけでも、HTML 構造が少しわかるように書く)
- 以下適当ですが、display, position, float は宣言ブロック中で上のほうに書くとか、background と color は近くに書くとか (しかしあまり気にしない)
- ルールと書いたり規則と書いたり安定しないけど気にしない
「極力使わない」というのは、どうしてもカスケーディングを維持したいときだけ使う。
* { margin: 0; padding: 0; font-size: 100%; font-weight: normal; font-style: normal; color: inherit; background: transparent; border: none; } a:link { color: #00f; text-decoration: underline; } a:visited { color: #660; text-decoration: underline; } a:hover , a:active { color: #00f; text-decoration: none; } p { margin: 0.5em 1em; } ul { padding: 0 0 0 1em; } ol { padding: 0 0 0 1.5em; } del, ins { background: #efefef; border: 1px solid #ccc; } input, textarea { background: #efefef; border-style: solid; border-color: #060; border-width: 0.2em 0.5em; } /* ここから構造順 */ body { line-height: 1.66; background: #1f2f16 url("/img/left.png") repeat-y 7% 0; color: #fff; margin: 0 0 0 7%; padding: 0 7% 0 50px; } #whole { background: #fff url("/img/right.png") repeat-y right top; color: #000; padding: 20px 55px 0 0; } #top a { display: block; background: url("/img/logo.png") no-repeat left top; width: 500px; height: 100px; margin: 0 0 0 20px; text-indent: -10000px; overflow: hidden; } #navigation { } #navigation ul li { display: inline; padding: 0 0.5em; border-style: solid; border-color: #ccc; border-width: 0 0 0 1px; } #navigation #search-form { position: absolute; top: 0; right: 7%; margin: 1em; } #content { padding: 1em; } #content h2 { font-size: 120%; padding: 1em; background: #ccc; } #footer { color: #ccc; background: #000; }