html - 効率的なCSSの作成

Question

さて、別の質問で何かが議論されていて、このリンクが言及されました：

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

その記事では、私が知らなかったいくつかのことを言っていますが、私がそれらについて尋ねる前に、私はこれを尋ねるべきです...それはFirefoxによって解釈されるCSSに当てはまりますか？私の許しは許しますが、MozillaUIが何を意味するのかわかりませんでした。（私を傷つけないでください！）

それが当てはまる場合、彼らが言うとき：

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

子孫セレクターは、CSSで最も高価なセレクターです。特にセレクターを使用するルールがタグまたはユニバーサルカテゴリにある場合は、非常にコストがかかります。多くの場合、本当に必要なのは子セレクターです。UI CSSでは、スキンのモジュール所有者の明示的な承認なしに、子孫セレクターの使用が禁止されています。
* BAD - treehead treerow treecell { }
* BETTER, BUT STILL BAD (see next guideline) - treehead > treerow > treecell { }

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

私の質問の愚かなレベルについてもう一度申し訳ありません...私は自分のサイトのCSSで常に子孫を使用しているので、ただ疑問に思っています。しかし、ええ、これがFirefoxに関するものでなければ、この質問全体は無意味です...

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

score 7 · Accepted Answer

子孫は子供/孫/曽孫/などである可能性がありますか？そして、子供はたった1つの深さですか？

はい、正確に。子の深さは1つだけなので、ルールが一致するかどうかを確認するためにレンダリングエンジンが再帰的に検索する必要があるスペースははるかに小さくなります。

はい、その記事はFirefoxとブラウザの両方に関するものです。その中にあるもののほとんど（すべて？）は、あらゆるページレンダリングエンジンに適用されます。

score 6 · Accepted Answer

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

平均的なHTMLページにCSSを適用することは、ページの読み込み中に発生するよりも最も速いことの1つです。
また、この記事はcssルールを適用するための最速の方法を提案しているかもしれませんが、どのくらいの費用がかかりますか？たとえば、ルールごとに複数のクラスを持たないことを提案しています。

悪い-.treecell.indented{}
良い-.treecell-インデント{}

それはほとんどとんでもないです。それはより速いCSSにつながるかもしれませんが、誰が気にしますか？すでにとを持っていると仮定する.treecellと、これらの提案に従うと、複雑なロジック、より困難なメンテナンス、重複したcssルール、より困難なJavaScript（CSSよりもはるかにコストがかかる）などに.indentedつながります。CSSセレクターの完全な豊富さを使用せず、これらのセレクターをフラットクラス、それは残念です。

score 2 · Accepted Answer

...私が書いているとき、私はそれを理解したかもしれないと思います。子孫は子供/孫/曽孫/などである可能性がありますか？そして、子供はたった1つの深さですか？

それはそう。

私が物事の効率面で追加できることの1つは、次のとおりです。本当に意味がない限り、*を使用しないでください。ルールが進むにつれてかなり集中的になり、ほとんどの人は本当にターゲットにしたい要素を指定するだけで逃げることができます。

score 1 · Accepted Answer

「親>子」は1ステップ下がるだけですが、「祖先子孫」は1ステップ以上下がる可能性があります。

さらに良いのは、DOM検索が少なくなるように、可能な限り「#id」タグを使用することです。

score 1 · Accepted Answer

UI CSSは、ブラウザの内部（設定ダイアログ、拡張機能インターフェイスなど）をスタイリングするためのものです。

子孫と子は異なり、子ははるかに具体的であり、考慮される必要がはるかに少なくなります。

score 1 · Accepted Answer

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

いずれにせよ、WebページのCSSを作成する場合、それほど大きな問題にはなりません。ページの読み込みで節約できる秒数も気付かないと思います。この記事は、Webサイトではなく、実際のブラウザー用に何かを書いている人々を対象としているようです。

score 1 · Accepted Answer

O'Reillysの「EvenFasterWebSites」には、「CSSセレクターの簡素化」というタイトルのこの章全体があります。Mozilla上のあなたのリンクを参照します。

2つの点を覚えておく価値があると思います。

はい、可能な限りこれを行った場合、HTMLとCSSはスタイルの混乱になり、ファイルサイズが追加されるため、さらに非効率になる可能性があります。最適なバランスを選択するのは開発者次第です。あなたがそれを書くときにすべての行を最適化することに苦しむのではなく、それを機能させてから、何が有益であるかを見てください。
別のコメント投稿者が指摘したように、ページの読み込み時にスタイルを適用する方法を理解するには、ブラウザが数ミリ秒かかります。ただし、これがはるかに大きな影響を与える可能性があるのは、DHTMLです。DOMを変更するたびに、ブラウザはスタイルシート全体をページに再適用します。このシナリオでは、多くの非効率的なセレクターがページに目に見える影響を与える可能性があります（知覚される遅延/無反応）。

score 1 · Accepted Answer

GoogleのPageSpeed（Firefox / Firebugアドオン）のドキュメントには、効率的なCSSに関する優れたページが含まれています。

html - 効率的なCSSの作成

8 に答える 8

Related

Reference