Webサイトからユーザーを逃さない基本テクニック
30分でできる！Webサイトを高速化する6大原則
2009年09月09日 07時00分更新
4.CSS セレクターは短く最適化せよ！
CSSはシンプルに、短く書くことがもっとも大切だ。いくつかのポイントがあるのでぜひとも押えて欲しい。基本は、「ブラウザーはCSSを適用するときマッチング作業をしている」「マッチングの母体が大きくなればなるほど、効率は悪くなる」ということだ。
■ユニバーサルセレクター『*』は避ける
ユニバーサルセレクター（全称セレクター）はその名のとおり“ユニバーサル”（すべて）であり、マッチングに相当の時間がかかる。つまり、
*{
margin: 0;
padding: 0;
}
というCSSリセットはレンダリングを遅くしてしまうため、なるべく使うべきではない。
■id名にタグやclassを付け加えるな
idはもともとユニークなもの。タグやclassを付け加える必要はない。余計なものを付ければレンダリングは遅くなる。
●悪い例：
ul#global-nav
●良い例：
#global nav
■子孫セレクターは避けろ
子孫セレクターもマッチングに時間がかかる。なるべくなら利用は避けたい。
●悪い例：
html body #global-navigation ul li a{
color: red
}
●良い例：
.global-nav-link{
color: red;
}
■子セレクターも避けろ
子セレクターもブラウザーに大きな負担をかける。
●悪い例：
html>body>ul>li>a{
color: red;
}
●良い例：
a{
color: red;
}
■継承を利用せよ
ベストな方法は、継承をうまく利用して、なるべく余計な指定をしないことだ。
●悪い例：
#bookmarkMenuItem > .menu-left { list-style-image: url(oxox); }
●良い例：
#bookmarkMenuItem { list-style-image: url(oxox); }
■IE7とIE8では、:hoverに注意
a要素以外の要素に:hoverを利用すると、Internet Explorer （IE）7とIE8ではレンダリング速度が落ちてしまう。この症状は、DOCTYPEにstrictを指定した場合に特に発生する。
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
