メールを整理していたら、約2年半前に自分が書いたメールを見つけました。

Subject: [airone-dev:07728] CSSパフォーマンス(v2後の研究課題?)
Date: Fri, 08 Aug 2003 23:26:25 +0900 (JST)
From: INOUE Seiichiro <inoue@ariel-networks.com>

参考
http://jt.mozilla.gr.jp/xpfe/goodcss.html

理屈では分かっていましたが、パフォーマンス的には、IDやクラスをつけまくるのが良いと読めます。

しかし、理論上は良いとは思えません。
結局、IDをつけることは新タグを作るようなもので、IDをつけまくると、HTMLと違う別のスキーマ
を持つようになってしまいます。
クラスをつけまくると、見栄えのために構造が影響を受けてしまいます。
美しさと効率が相反する、悩ましい部分です。

子孫セレクタ指定が(劇的に)遅いのは昔から分かっていたことですが、
IE5がCSS1サポートで、子セレクタが使えないので、やむなくAirOneでは使っています。

引用
> ダメ - treehead treerow treecell { }
> マシだが、まだダメ (次を参照) - treehead > treerow > treecell { }
> 完璧 - .treecell-header { }

パフォーマンス的には完璧かもしれませんが、プログラマ的感覚からすると、
「変数のスコープを大きくして直接参照すれば速い」、と言っているようにも見えて、
全面的に賛成とは言いにくいです。
とは言え、パフォーマンスは目前の問題ではあります...

「IDやクラス指定をした場合タグ名を付けるな」、というのは想定外でした。
ぼくの脳内HTMLレンダリングエンジンは、タグから先にマッチすると思っていたので、
table.movebtn tr .button
より
table.movebtn tr td.button
の方が、ムダなマッチングが少ないと思っていました。

IEがどうかは不明です。MozillaがIDやクラスから先にマッチさせるなら、同じかもしれません。

昔のAirOneはIE5をサポートしていたため、子セレクタの指定を使っていません(すべて子孫セレクタ)。今はIE5がサポート外なので、子セレクタにして少しパフォーマンスを稼げるかもしれません。