reset.cssをカスタマイズしてパフォーマンスアップさせる方法

CSSレイアウト講座を3月31日に受講してきました。
その中で、「reset.css」の説明がありました。私の場合ですが、marginなどをゼロにしてくれるものという認識しかしていない事に気付きました。そのような事では、内容を把握していないソースをコピペして本来のreset.cssの良さを有効活用できずに終わってしまいます。講座では誕生の理由から説明して頂きました！

そもそも、reset.cssはなぜ必要？

例えばh1にはmarginやpaddingがデフォルトで付いています。これをそのまま使うこともあるかもしれませんが、左揃えにしたい、間隔を調整したい時はcssで指定する必要があります。デフォルトで付いているセレクタは他にもたくさんあるので、各々の指定を始める前にまとめてリセットしてしまえば、シンプルなcssを作ることができます。

全称セレクタで指定すると重い

*{margin: 0; padding: 0;}

上記の指定方法もよく見かけます。しかし、これでは元々『0』のセレクタに対しても指定してしまい、余計な読み込みをさせてしまい、パフォーマンスを下げてしまいます。

元祖reset.cssとは？

下記のサイトに、初めて作成した方の記事があります。

http://meyerweb.com/eric/tools/css/reset/

（2007年にはすでにあったとは、、知りませんでした。）

reset.cssをサイトに合わせてカスタマイズする

オリジナルのreset.cssは更新されているとはいえ、テンプレートではありません。上記の記事にもありますが、作成するサイトに必要なものを追加し、不要なものを削除してカスタマイズしていきます。

・オリジナルreset.css

http://meyerweb.com/eric/tools/css/reset/reset.css

例えば、上記のオリジナルを参考にして考えてみます。

• font-sizeは100%で良いか？
• list-styleは後で、オリジナルの指定を上書くなら不要なのではないか？

などなど、内容はサイトによると思いますが、reset.cssの考え方をもとにシンプルでパフォーマンスの良いcssを目指したいと思います！