続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。

セレクタは右から左に解釈される

これは正直知らなくて、結構衝撃でした。

#foo .bar {}

これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ

.bar {}

と書いたほうが高速だということ。

また、以下の様に要素名で指定すると、その要素を全て探します。

#foo a {}

これは一度a要素を全て探すので、できればaにclassをふって

#foo .anchor {}

とするほうが高速のようです。（#fooをとるとより高速）

特にユニバーサルセレクタなどは、

#foo * {}

とすると、全ての要素の親要素に対して#fooがあるかどうかを調べるので遅くなるようです。

子孫セレクタは遅い

子孫セレクタの処理が一番コストがかかるということらしいので、

div#wrapper div#main ul.list li {}

などとしないでliにclassをふって

.list-item {}

idやclassには要素名をつけないほうが高速

以下の様にidやclassに要素名を書くよりも書かない方が高速らしいです。

div#foo {}
li.item {}

これは、以下の様に書いた方がいいとのこと。

#foo {}
.item {}

まとめ

DOM要素の数がすごく多くなるとCSSのセレクタの書き方がネックになることもあるとのことですが、普通のWebサイトつくっててCSSのセレクタが速度のネックになることはほとんどないと思います。

ただ、作業効率やコードの可読性などとのトレードオフを考えて敢えて低速な書き方をするのと、知らないで低速な書き方をしているのは大きな違いなのでCSS書く人で知らない人がいたら一応覚えておくといいと思います。

とするのがよいとされています。