*{ margin : 0 }はもう古い!?

Google Technorati Buzzurl Digg Bloglines DRECOM niftyクリップ pookmark pingking Choix

以前のエントリーでユニバーサルセレクタを用いてデフォルトのCSSをリセットするという記事を書きましたが、どうやら海の向こうではもうそれは時代遅れのようです。

今月号(2007年3月)のWebDesigningにも大藤幹さんが同様のことを書いていらっしゃいますね。ユニバーサルセレクタを用いた手法というのは今後すたれていくのかな・・・

何故*セレクタを使った手法が時代遅れなのか?それが気になるところですが、主な理由として挙げられているのは下記のようなもの。

* レンダリングが遅くなる(重くなる)。大きなページは特に。
* 良いデフォルトのスタイルを無駄にしてしまう。(例えばサブミットボタンなど)

確かに一度全てのスタイルをリセットして、再び上書きをするわけですからやり方的にはあまりスマートではないですね。これらを解決する手段としては、使用するタグごとに個別に指定してあげるというやりかたが良いようです。例えば下記のようなもの

html, body, {
margin: 0;
padding: 0;
}

h1, h2, h3, h4, h5, h6,
p, pre, blockquote,
ul, ol, dl, address {
margin: 1em 0;
padding: 0;
}


Yahoo UI LibraryのYUI Reset CSSを参考にするのも良いかもしれません。YUI Reset CSSでは*セレクタを使ってリセットする代わりに、最初に下記のように書いています。

body,div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}