Page Speedの評価の一つにUse efficient CSS selectorsという項目があり、そこで効率的なCSSセレクタを使用するという話が挙げられています。
ブラウザではセレクタの規則を右から左にフィルターしていくそうなのですが（「div img a」ならaタグを見つけて、先祖にimgがあるもので絞り込んで、さらにその先祖にdivであるもので絞り込む ）、このフィルターの処理がパフォーマンスを悪化させるらしいのです。だからパフォーマンス的には子孫セレクタの指定はできるだけ避けた方がよくて（子供セレクタの方がましらしい）、IDのみとかclassのみとかできるだけシンプルな方が良い、という話。
ブラウザの内部処理を考えれば、当たり前と言えば当たり前のように感じますが、CSSの書き方でパフォーマンスが劣化するという意識したことがなかったのでなかなか興味深かったです。私はどちらかというとスタイルの宣言の予期せぬ競合を避けるために余分に詳細度を上げている方だったのですが、今回はかなりシンプルに変更してみました。
- タグにclass属性つけて「.list < li」みたいに指定するのは許容範囲なのかなあとは個人的には思いますけど。
そして、実際のところ、CSSの記述の仕方を変えたことによるパフォーマンスの向上はあまり感じられないわけですが。まあとにかく、大きなサイトでトラフィックもありCSSの量も多いという場合には一考の余地はあるのではないのかなと思います。