基礎以上ベスト・プラクティス未満。
CSSハックの多くは便利で強力なものだが、それに頼るのは危険だ。まずは普通にCSSを書くことに注力するべきだろう。その上で条件付きコメントやModernizrを使うかCSSハックをあえて使うか決めると良い。
キーワードによる色の指定や#rrggbb、rgb()といくつかの方法で色を指定することができるが、#rrggbbの桁を合わせることも含めていずれかに統一した方が可読性とメンテナンス性が上がるだろう。
%は長さの単位ではないborder-widthなどで使用できない理由はそれだ。他にも使用することができないプロパティがいくつかある。また%はコンテキストによって基準になる単位が大きく変わる他継承においてもある意味不可解な挙動を起こすことがある(line-heightなど)ので、使用には注意を払う必要がある。
HTTPヘッダーのContent-TypeフィールドやCSSファイル内での@charset、link要素のcharset属性(HTML5にはない)など様々な方法でCSSの文字コードを示す方法はある。しかし文字コード絡みのブラウザのバグが過去にいくつも報告されており、それを考慮するとUTF-8で(なるべくならASCII文字だけで)書くのが無難だろう。
そのほとんど全ては不必要なはずだ。どうしても必要というのならそれはHTMLの設計がおかしい可能性が高い。
対象となる要素に仮想的にクラスを割り振るのが擬似クラスなので、p:first-childは親要素に対してあるp要素が最初の子だった場合に対象になる(p要素の最初の子ではない)。対象となる要素の子(CSS3では子とは限らない)に仮想的な要素を作り出すのが擬似要素だ。そのためp:fist-letterは全てのp要素の最初の一文字が対象になる。
@importは最初に書く何かしらのルールが出てきた時点でそれ以降にある@importは無効になる。下手に書くとブラウザが効率よく並列ダウンロードしてくれないという問題はあるものの@importを使う機会はたまにあるので忘れないようにするべきだ。
IDセレクタが強いとか後に書いたセレクタの方が強い程度の知識で終わっている人が大半だろう。そして多くの人が考えるよりもカスケーディングの奥は深いので、あまり意識せずに簡明なセレクタを心がけてCSSを書くのが基本にして奥義に通じるのではないかと考える。
!importantは必要ない普通にCSSを書く上で!importantが必要になることはまずない。セレクタの書き方と順序により必要になることがあるが、多くの場合はセレクタの書き方の工夫のみで使用を回避できる。うまく使うと威力を発揮するがその分取り扱いが難しいので使用を避けた方が無難だろう。
特定の値(CSS 2.1の話ではないがrgba()による色指定など)に対応していないブラウザへのフォールバックに使用したり、同じプロパティを複数書かざるをえないことはままある。並べて書いてあれば、その値を比べることによってどうして複数必要なのかといった理由が明瞭になるだろう。
編集時に限って…の話だが、短縮プロパティはそもそも順序を間違えることがありうるし(fontでfont-weightをどこに書くかとかパッとわかる人は少ない)、margin-rightなどと書いてあった方が誰が読んでも把握できるだろう。最終的にそれらのプロパティをまとめたり空白を詰めて圧縮してくれたりするツール(CleanCSSなど)に通すことによって最適化されたCSSファイルに変換すれば良い。
可読性とメンテナンス性のために一貫性を持たせることの重要性は高い。様々な並べ方があると思うが、プロパティの削除や追加が頻繁に行われているCSS3を考慮してアルファベット順に並べるというのがコンセンサスを得やすいだろう。
borderのレンダリングに過度の期待をしないborderのレンダリングはブラウザによってかなり違う。その違いは微妙なものとも言えるのだが、borderプロパティ自体の主張が強いので受けるイメージに大きくずれができる。solidとdoubleは比較的差がないので比較的安全と言えるだろう。
position: absoluteの基準を理解する仕様に書いてある通り、直近のポジション指定されている親が基準になる。つまり親にrelative等がpositionの値として指定された要素があればそれが、なければ通常viewport(表示領域)が基準になる。
right: 100%とleft: -100pxを使い分けるどちらもマイナスの位置に要素を配置するテクニックである。内容物が可変な場合は%配置の方が向いていることが多く、メンテナンス性も高い。逆に固定サイズの場合は負の長さを使った方が確実なので、場合によって使い分けるのが良いだろう。
vertical-alignのことは忘れる行ボックスという概念の理解が必要だが、非常に込み入った概念で正確に把握している人は数えるほどしかいない。多くの場合は代替手段があるのであまりこだわらない方が無難だろう。
:beforeと:after擬似要素と置換要素ブラウザによって挙動が違うので使用は避けるべきだろう。置換要素とはimgやtextarea要素などがそれにあたり、それらに対してはcontentプロパティで何かを流し込むことができたりできなかったりするということだ。
list-style-typeのデフォルト値を知る多くのブラウザにおいてデフォルトではいわゆるブレットと呼ばれる黒丸だが、ネストすると下の階層では違うマークが使用される。そのため安易にul要素等でnoneなどを指定してリセットしてしまうとこのデフォルトの挙動に戻すことができなくなる(難しくなる)。
background-imageとbackground-colorはセットで指定する最近は画像非表示で…などという人はまずいないがそもそもそういうためのものではない。画像は読み込みに失敗することがあるので、それに対してのフォールバックとして背景色の指定は絶対に必要であるだろう。
background-positionとtop他の座標指定の仕組みは違うX座標とY座標を指定すると、その位置と背景画像におけるそのX座標とY座標の位置を合わせるようにして配置される。position系の座標指定のように指定した位置と背景画像の左上を合わせるわけではない。この仕様のお陰で背景画像の中央揃えは50% 50%で簡単にできるようになっている。
x-heightの近いものを選ぶプライマリのフォントと同じ見た目ではなく読感を提供することが重要なので、形状よりも文字幅を合わせて一行の文字数に差が出ないようにすることやx-heightが近いものを選んで文字の識別しやすさを揃えることを重視した方が良い。
総称ファミリは文法的には必須ではない。しかし書かなかった場合にフォールバックされるフォントはブラウザの実装に強く依存し、場合によってはユーザーが設定すらしていないよくわからないフォントで表示されてしまうことになる。総称ファミリを指定しておけばユーザーが設定したフォントになるという実装が多いので、そういった意味でユーザーに優しいCSSと言えるだろう。
font-style: italicは斜体になるとは限らない通常斜体のないフォントにそれを指定した場合、ブラウザ側が無理やり斜めにした形で表示される。しかし、限られたケースではあるが斜体が無いにもかかわらず、ブラウザからは斜体があるように見えるフォント(例えばメイリオ)があることは覚えておきたい。
text-transformによる影響を知る文字の大文字化やキャピタライズを行うプロパティだが、その実装にはブラウザ間で違いがある。capitalizeでハイフンに続く大文字になるブラウザとそうでないブラウザがあるし、uppercaseにしたテキストをコピーすると大文字になったテキストがクリップボードに入るブラウザとそうでないブラウザがある。
cursorは理由がなければ使わないほとんど全てのケースでユーザーを混乱させる原因になる。クリックするとa要素のようにページの遷移が起こる要素にpointerとするなど妥当な理由があればその限りではない。