「なぜ CSS が巨大になってしまうのか、なにがいけないのか」

Nicole Sullivan さんの素晴らしいプレゼン。

5 Mistakes of Massive CSS

内容は30分ぐらい。ビデオのほうが分かりやすいのでおすすめ。だいたいスライドの35ページ目まではあんまりおもしろくないので飛ばしてもいいと思う。

スライド中に出てくる衝撃的な統計は、Sullivan さんのブログにもまとめられているのでご一見を。

要旨

CSS の「ベストプラクティス」は間違っている。

プレゼンでは Facebook の例を挙げているけど、例えばサーバー側のロジックでは、ページヘッダー、右コラム、中央、左コラム、フッター、のようにビューを分けるところだけど、CSS をそのような区分でデザインしてはいけない。

各パーツでそれぞれの h3 や p や div をリセットしてしまうのは効率悪いし可搬性もない。あっちのブロックをこっちに動かして、フォントが変わったりするようじゃだめ。

一つのページの CSS で h1-6 とか float とか margin:0 とか font 指定とかが何回も出てくるようだったら危ないサイン。

カスケーディングにまかせること。似たような特徴を持つパーツを同じクラスに。右にあっても左にあっても上にあっても下にあっても、同じ種類のものは一気にスタイリングする。

ID 指定は使わない。ID は可搬性まったくない。特定の部分だけに適用するルールは極力書かない。

あと、どうしても特定ブラウザ向けに CSS を書きたかったら .ie とかいうものではなくてバックスラッシュハックとかを使う。そのほうがモジュールをひとまとめにできる。(でも IE6 とか 7 以外のためにハックしないといけなくなったときは、そもそもやり方を間違えていることを疑え)

だいたいこんな感じ。

自分まとめ

ページの一部を見ずに一歩引いて全体を見るのが大切。