Chris Casciano氏の選んだCSSティップス10選

2006年2月12日著

Chris Casciano氏が「Ten Simple CSS Tips」という記事のなかで、知識レベルを問わずスタイルシートを書く誰にとっても便利であろう10のヒントを公開していました。個人的にナルホドと思った部分があったし、もしかすると参考になると思う人もいるかもしれないので、以下に訳文を晒しますね。原文はCreative Commonsライセンスでしたが、一応Chris本人から訳文掲載の許可も得ています。あーちなみに例によって英語は苦手なので（おい）、誤りとかあったら指摘してください＞誰

スタイルを適用し始める前に、文法チェックによりマークアップを妥当なものにしましょう。
基本となるスタイルシートは* {margin:0; padding:0; }という規則集合で書き始め、（マージンやパディングは）それが必要な箇所に必要なだけ指定しましょう。これにより、ブラウザのデフォルト・スタイルシートとあなた自身の意図したレイアウトとの違いに悩まされる時間は、劇的に短縮されます。
文書を作成したりレイアウトに関する問題をデバッグする際には、余分なボーダーや背景色を加えるといったテスト用のスタイルを適用しましょう。div { border:1px red dashed; }はまるで呪文のように機能します。ボーダーやその他のスタイルを適用するブックマークレットもあります。
文書の木構造（DOM）と個々の要素に適用されたスタイルの双方を詳しく調べられるよう、FirefoxのDOMインスペクタ、あるいは他のブラウザ向けで同様のツールの使い方を学びましょう。
（スタイルフックとしての）idあるいはclass属性は文書の木構造でより上位の要素に設定し、文脈セレクタをできるだけ簡略化しましょう。セレクタが冗長になることを恐れないでください。より長いセレクタはCSS文書を読みやすくし、そしてclassあるいはdiv中毒に陥る危険性を減らします。
サンプル用のコンテンツを収めたページを作成し、異なる状況において考えられるあらゆるHTMLタグ（入れ子になったリスト、引用ブロック、整形済みテキスト、定義リストなど）を含めてください。そのページで、あなたの書いたスタイルシートの完全性をチェックしましょう。
background-imageプロパティでスタイルを適用すべきところを、そうせずにimgタグで画像を配置しないでください。ただし、imgタグの使用が妥当な場合もあることをお忘れなく。
包含ブロックとは何であるか、そしてposition:relativeがいかにしてレイアウト上の基準点を作り得るかを学びましょう。
特定のブラウザに対して構文フィルタを用いた「ハック」を使いたがったり、画像置換テクニックのような「トリック」を使うのは止めましょう。
楽しみましょう。背景画像で、floatプロパティで、そして正または負のマージンで。継承やカスケーディングといったルールで。楽しみましょう。