ブラウザのCSSの読み方

会社で聞いた豆知識をメモ。

その人によると、
ブラウザというものは、CSSを子セレクタから順番に読んでレンダリングしていくというのです。

たとえば、

ul#list li a{
sss:xxx;
}

という記述があったとします。

通常の、JS系の解釈から考えると、

1. まず、#listのulを探し、
2. その中のliを探し、
3. aを探し、
4. aに対してプロパティを指定する

という流れだと思います。


でも、ブラウザのレンダリングはそうではなくて、

1. まずaを探し、
2. 親にliを持つaに絞り、
3. さらに親にul#listを持つものに絞り
4. 絞ったものにプロパティを指定する

流れだそうなのです。


だから、ブラウザのレンダリング速度を向上したければ、
子要素にID（やクラス）を指定するのが効果的なのだそうです。
（もちろん、ソースがきれいか汚いかという問題は除いて。）


どうも、コーダーの視点からすると、マークアップをキレイにする方法ばかりに目がいってしまいがちなのですが、
『お客さんの更新しやすさ』
『ユーザーの訪れやすさ、快適さ』

もきちんと考えてマークアップしていかないとなと思ったのでした。