効率的なCSSの書き方

Question

[OK]を別の質問で何が議論されていた、そしてこのリンクが記載されたよう：その記事の中で

https://developer.mozilla.org/en/Writing_Efficient_CSS

を、彼らは私が知らなかったいくつかのことを言うが、私はについて尋ねる前にそれらは、私はこれを尋ねるべきです...それはFirefoxによって解釈されるCSSに当てはまりますか？私の憂鬱を許しても、私はMozillaのUIが何を意味するのか分からなかった。 （私を傷つけることはありません！）

を、それが適用されない場合は、彼らが言うとき：

は、子孫セレクタを避けてください！

子孫セレクタは、CSSの中で最も高価な セレクタがあります。特に セレクタを使用するルールがタグ またはユニバーサルカテゴリにある場合は、 が恐ろしく高価です。しばしば、 は、子供の セレクターが本当に望ましいものです。子孫 セレクタの使用は、 あなたのスキンの モジュールオーナーの明示的な承認なしに、UI CSSで禁止されています。

* BAD - treehead treerow treecell { } 
* BETTER, BUT STILL BAD (see next guideline) - treehead > treerow > treecell { } 

子孫セレクタは、単にスペースのですか？子どもと子孫の違いは何でしょうか？子は別の要素の中の要素ですが、子孫と同じではありませんか？私が書いているように、私はそれを理解したかもしれないと思う。子孫は子供/孫/曾孫/などとなりうる？そして、子供は1つ深いですか？

私の質問の愚かなレベルのために再び申し訳ありませんが...私は常に私のサイトのための私のCSSの子孫を使用しているので、ただ、不思議。これは、この全体の質問は無意味であるFirefoxの話ではありません場合はしかし、ええ、...

そのないFirefoxに関する場合には、誰もが一般的にはFirefoxやブラウザのための効率を説明する記事へのリンクがありますか？

Answer 1

まず第一に - この記事の提案は、HTMLページためではありません - 彼らはMozillaのUIのために特別です - XUL、それはXULのためではなく、HTMLのためのベストプラクティスかもしれません。

平均的なHTMLページにCSSを適用することは、ページを読み込んでいるときに起こるよりも速いものの1つです。
また、記事ではCSSルールを適用する最も早い方法を提案するかもしれませんが、どのような費用がかかりますか？ - .treecell.indented {}
GOOD - .treecell-インデント{}ほぼ法外ある

BAD：例えば、それらは、ルールごとに複数のクラスを持っていないことをお勧め。より速いCSSにつながるかもしれませんが、誰が気にしますか？
は、彼らがフルに使用していないを提案するなど、 すでに.treecellと.indentedを持っていると仮定すると、これらの提案を以下を複雑なロジックにつながり、難しいメンテナンス、重複CSSルール、（多くのそのCSSがかかります）難しいのJavaScript CSSセレクタの豊富さとこれらのセレクタをフラットなクラスに置き換えることは残念です。

Answer 2

子孫は、孫/孫/孫/等である可能性がありますか？そして、子供は1つ深いですか？

はい、まさに。子は1つしか深くないので、レンダリングエンジンが再帰的に検索して、ルールが一致するかどうかを確認する必要がありません。

はい、この記事は一般的にFirefoxとブラウザの両方についてです。それに含まれるもののほとんど（すべて？）は、ページレンダリングエンジンに適用されます。

Answer 3

「親>子」は1つだけ下にありますが、「祖先の子孫」は1つまたは複数のステップを下にすることができます。

DOM検索が少なくなるように、できるだけ "#id"タグを使用する方がよいでしょう。

Answer 4

UI CSSはブラウザの内部をスタイリングのためである -

子孫と子供が異なっているなど、設定ダイアログを拡張インタフェース、子どもたちは、はるかに固有のものであり、はるかに少ないと考えることがあるにつながります。

Answer 5

...私が書いているように、私はそれを理解したかもしれないと思う。子孫は子供/孫/曾孫/などとなりうる？そして、子供は1つ深いですか？

実際。

効率の面で私が追加できることは、です。実際にはを意味する場合を除き、*は使用しないでください。ルールが進むにつれてかなり集中的になり、ほとんどの人は、本当に目標にしたい要素を指定するだけで逃げることができます。

Answer 6

子セレクタの問題は、それもサポートされていないということです。もちろん、これは新しいIEブラウザで修正されている可能性があります。

いずれにしても、Webページ用のCSSを書くときにはそれほど大きな問題にはなりません。私はページの負荷を節約する秒数が気づかれることさえ疑うでしょう。この記事は、ウェブサイトではなく、実際のブラウザ用のものを書く人々の方に向けられています。

Answer 7

O'ReillysそれはMozillaの上のあなたのリンクを参照しています。簡素化CSSセレクタ 『" Even Faster Web Sites"この題さに全体の章を持っている』。

私は2つの点が念頭に価値があると思います。

1. はい、あなたがこれを可能な限り行った場合、あなたのHTMLとCSSはスタイルの混乱になり、ファイルサイズが増えて非効率になる可能性があります。あなたがそれを書いているときにすべての行は、それを働かせ、次に何が有益であるかを見てください。

2. 別のコメント欄が記載されているように、ページの読み込みにスタイルを適用する方法を理解するには、ブラウザのミリ秒がかかります。しかし、これはDHTMLにはるかに大きな影響があります。 DOMを変更するたびに、ブラウザはスタイルシート全体をページに再適用します。このシナリオでは、多くの非効率なセレクタがページに目に見える影響を与える可能性があります（認識遅れ/不応答）。

Answer 8

GoogleのPage Speed（Firefox/Firebugアドオン）のドキュメントにはgood page on efficient CSSが含まれています。