11

要素を選択するための最良の (最も効率的な) 方法が何であるかはわかりません。

次のレイアウトがあるとしましょう（非常に単純な例）

<div id="navigation">
  <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
</div>
  1. 順不同のリストを選択したいのですが (サイト全体で他の UL に影響を与えないように)、#navigation ul {}UL にクラスを割り当てたり割り当てたりする必要がありますか?
  2. リスト項目を選択して、それらにのみ影響を与えるようにしたいと思います。クラスを行うnavigation ul li{}か、割り当てる必要がありますか?
  3. 最後に、最初のリンクを選択してスタイルを設定したい場合#navigation ul li:first-child {}、クラスを実行または割り当てるべきですか?

これらの質問はほとんど同じだと思いますが、クラスを使用する必要がある場合と使用しない場合があることに興味があります。

4

4 に答える 4

12

ここには、厳密で迅速な答えはありません。

一般的な経験則では、特定の要素をグループ化し、それらを同じように扱い、クラスを使用することがそれを行う唯一の手段である場合にクラスを使用することがあります。

たとえば、最後の例では、クラスは厳密に必要ありません。

ただし、例 3 のクラスを使用すると、ブラウザーが関連項目をより迅速に見つけるため、パフォーマンスが向上します。これに対するトレードオフは、コードの可読性がわずかに低下することです。すべてにクラス名があると、残りのマークアップを読むのが難しくなります。

要するに、あなたが上に示したもので、あなたが書いたものは素晴らしいです。

セレクターの効率性について説明しているこの記事を読む必要があります。

基本的に、効率の順序は次のとおりです。

ID, e.g. #header
Class, e.g. .promo
Type, e.g. div
Adjacent sibling, e.g. h2 + p
Child, e.g. li > ul
Descendant, e.g. ul a
Universal, i.e. *
Attribute, e.g. [type="text"]
Pseudo-classes/-elements, e.g. a:hover

クラスと ID のパフォーマンスの違いは、通常は無関係です。

ただし、リストをさらに下に行くと、物事はかなり遅くなります。

これは、どこにでもクラスと ID を追加するための議論ではありません。パフォーマンスと保守性の間のトレードオフを判断できるようにするだけです。

于 2012-07-26T14:15:58.407 に答える
0

#navigation 要素の下の構造がどれだけ複雑になるかによると思います。#navigation 要素を使用してすべてを参照することは、あなたが示したような単純な構造であればおそらく問題ありませんが、それがより複雑であるか、異なる動作を必要とする異なる ul、li 要素を持つ場合、ネストされたものを id/class します要素。

于 2012-07-26T14:14:52.950 に答える
0

Javascript の使用については、ネイティブ セレクターを使用し、クラスや ID を使用しないよりも高速だと思います。

詳細については、この理論を複雑なコードでテストするだけだと思います（別の時間を参照してください）。

JavaScript の高速化はブラウザに依存することを忘れないでください。

CSS の詳細については、こちらの優れた記事を参照してください。

于 2012-07-26T14:22:22.763 に答える
0

#id は一意である必要があり、クラスは一意であってはなりません。

したがって、JS を追加する必要がある場合は、#id が必要です。さまざまな要素のスタイルを設定したいだけの場合は、.class で問題ありません。

于 2012-07-26T14:14:15.547 に答える