正直、この質問についてあまり考えたことはありません...私たちが作成する CSS はどのくらい効率的ですか?また、ブラウザーのレンダリングはどのくらい速いですか?
これはブラウザ開発者が懸念すべきことです (ページの読み込みが速くなり、ユーザーはより満足します)。 Mozilla には「ベスト プラクティスについて」という記事があります。もちろん Google もこの問題を非常に懸念しており、 「ブラウザ レンダリングの最適化」という記事もあります。
彼らが主に主張していることを見て、それからその実用性について議論しましょう。
右から左へ
ブラウザーが CSS セレクターを読み取る方法の重要な原則は、ブラウザーが CSS セレクターを右から左に読み取るということです。これは、ul > li a[title="home"] のようなセレクターの場合、a[title="home"] が最初に読み取られることを意味します。この部分は通常「キー セレクター」と呼ばれます (「ターゲット セレクター」と呼んでもいいでしょうか -_-!)。セレクターの最後の部分は選択されたラベルでもあります。
ID は最も効率的ですが、ユニバーサルは最も遅くなります
ターゲット セレクターには、ID、クラス、タグ、ユニバーサル文字の 4 つがあります。それぞれの効率を見てみましょう。
#main-navigation { } /* ID (最速) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* クラス */
ul li a.current { } /* クラス *
ul { } /* タグ */
ul li a { } /* タグ */
* { } /* ユニバーサル (最も遅い) */
#content [title='home'] /* Universal */ 次に、右から左へのセレクターとターゲット セレクターの概念を組み合わせると、次のセレクターが効率的ではないことがわかります。
#main-nav > li { } /* 速いように見えますが、実際は非常に遅いです*/
これは少し混乱しますが、ID が最も効率的であるため、ブラウザは ID によって li をすぐに見つけることができます。しかし実際には、li タグが最初に読み取られます。
タグを付けて変更しないでください
死ぬほどこんなことはしないでください。
ul#メインナビゲーション { }
ID は一意であるため、タグで装飾する必要がなく、効率が低下するだけです。
可能な場合は、クラスの変更に使用しないでください。 class は一意ではないため、理論的には別のタグで使用できます。必要に応じて、タグを使用してさまざまなスタイルを制御できるため、タグの変更 (例: li.first) が必要になる場合がありますが、これを行う人はほとんどいないため、行わないでください。
子孫セレクターを使用することほど悪いことはありません
デビッド・ハイアット：
子孫セレクターは CSS で最も高価なセレクターであり、特にタグやユニバーサルの後に配置される場合、法外に高価になります。
次のようなものと同様に、これは効率性の絶対的な癌です。
html 本文 ul lia { }
セレクターがレンダリングされるよりも、セレクターがレンダリングに失敗する方が効率的です。
これについてより良い証拠があるかどうかはわかりません。CSS スタイルシートで見つからないセレクターが多数ある場合、奇妙に思えるかもしれませんが、セレクターを言い換えるには右から左であることに注意することが重要です。 、見つからないと、試みを停止します。しかし、それが見つかった場合、説明にはさらに労力がかかります。
なぜこのようにセレクターを書くのか考えてみましょう
これについて考えてみましょう:
#main-navigation li a { font-family: ジョージア、セリフ }
おそらく、セレクターから始める必要はありません (フォントを変更したいだけの場合)。これはより効率的かもしれません:
#main-navigation { font-family: ジョージア、セリフ }
実用性
先ほどの Mozilla の記事も刻まれていますか？ 10年経ちました。事実は、コンピューターの速度が 10 年前よりも遅くなっているということです (私が誤解したわけではありません。著者は現在の WEB がますます複雑になっていると言いたいのです)。当時はこのことがもっと真剣に受け止められていたような気がします。 10 年前、私は 21 歳のハンサムな少年でした。もちろん、CSS について何も知らないとは思いませんでした。したがって、以前の状況についてはお話しできません...しかし、レンダリング効率の問題が真剣に考慮されなかった理由は、それが大きな問題になったことがないからだと思います。
以下に私の意見をいくつか示します。 何はともあれ、上記の内容は理にかなっており、CSS の制作を制限するものではないので、上記の方法に従って実行できます。しかし、独断的になる必要はありません。あなたが完璧主義者で、これまでそのようなことを考慮したことがなかった場合は、以前に書いたスタイルのいくつかを再検討して、改善の余地があるかどうかを確認してください。 Web サイトのレンダリングが明らかに遅いと思わない場合は、今後の作業ではあまり気にしないでください。
超高速で実用性ゼロ
ID が最も効率的なセレクターであることはわかっています。レンダリング速度を最大化したい場合は、個々のタグごとに ID を構成し、これらの ID を使用してスタイルを記述することができます。それは超高速で超バカバカしいことだろう。その結果、セマンティクスが非常に貧弱になり、保守が非常に困難になります。コアでもこれが行われるのを見るべきではありません。これは、効率的な CSS を実現するためにセマンティクスと保守性を放棄しないことを思い出させるものになると思います。
このアイデアについてメールをくれた Jason Beaudoin に感謝します。この件について詳しく知っている人、または同じように使用する追加のヒントがある場合は、ぜひ聞かせてください。
ちなみに、CSS セレクターは多くの JavaScript ライブラリで使用されているため、上記の内容が引き続き適用され、ID セレクターが依然として最も高速で、子孫セレクターや類似のものは遅くなります。
PS : N 個を超える子孫セレクターを使用する勇気のある人を見てみましょう。 。 。私のID使用に反対する人もいます。 。 。うわー、ははは。 。 。