速いCSSを書くためのガイドライン

Question

GoogleのCSS最適化の場合、結果は一般的に何らかの圧縮ツールに関するものです。今のところ、送信/解析の速度を忘れていると、に速い書き込みルールのためのガイドラインがあり、ドキュメントにを適用するのは不思議です。

Basicの例：

<div class="a x">...</div> 
<div class="a y">...</div> 
<div class="b x">...</div> 
<div class="b y">...</div> 

対

<div class="a"> 
    <div class="x">...</div> 
    <div class="y">...</div> 
</div> 
<div class="b"> 
    <div class="x">...</div> 
    <div class="y">...</div> 
</div> 

これらのCSSは異なるセレクターが必要になります。

.b.x {...} 

対

.b .x {...} 

を

パフォーマンスに関して、前者または後者を支持する理由はありますか？確かに、それはセレクタエンジンに依存しますが、おそらくCSSルールはすべてのエンジンが持つ自然な実装アルゴリズムに役立ちます。

文書があれば、同じセレクタのコストを見積もる方法を知っていますか？

どこかのガイドラインがありますか？

ブラウザ固有ですか、ユニバーサルですか。

Answer 1

あなたの例を見た人は私のHTMLマークアップを減らすので、私は個人的に2番目を好みますが、CSSにはあまり効果がありません。マークアップが少ない場合は、コードを書き込む時間が短くなります。&ページを読み込む時間も短くなります。