CSSとjQueryのセレクター:クラス/ IDだけですか、それともタグですか?

css css-selectors jquery jquery-selectors
CSSとjQueryのセレクター:クラス/ IDだけですか、それともタグですか?

CSSおよびjQueryでクラス/ IDセレクターを操作すると、2つの異なるアプローチがよく見られます。

1. クラスまたはIDのみ:

  • CSS:*

.foo{}

#bar{}
  • jQuery:*

$(".foo")

$("#bar")

2. タグ付きのクラスまたはID:

  • CSS:*

div.foo{}

div#bar{}
  • jQuery:*

$("div.foo")

$("div#bar")

” ” ‘

私の質問は次のとおりです。タグを使用してセレクターをさらに絞り込むことを禁止します。クラス/ IDでタグを配置することに問題はありませんか? 適切な構文はどれですか?

特異性のためにタグが必要でない限り、それを配置するのはまったく間違っていると言う人がいます。 違いはないと言う人もいますが、実際にはセレクターに関する詳細な情報を提供するので、それを好みます。

どう思いますか?

  5  1


ベストアンサー

タグの有無で比較するベンチマークを作成しました。

最高のパフォーマンスを期待する場合:タグを追加しないでください!

5


タグが含まれている

$(" div.foo ")`または `div.foo {}

特定のクラスまたはIDを持つすべての要素を検索しないようにブラウザに指示します。 代わりに、上記の例では、単にdivを検索します。

単一の要素または小さなページではパフォーマンスは無視できる場合がありますが、数千のタグといくつかの異なるcssまたはjQuery呼び出しを含むドキュメントについて話している場合は、合計する可能性があります。

  • 2つの要素の区別*

場合によっては、同じクラスを持つ2つの要素を区別するために必要になることもあります。

特異性

さらに、可能な限り特定のCSS(およびjQuery)を作成する方法として、可能であれば要素を含める必要があると思います…​ 驚きを最小限に抑える!

共有コード/トラブルシューティング/更新に適しています

また、要素がルールに含まれていると、ルールの検索/変更/編集がはるかに簡単になります。

編集

@YoTsumiのベンチマークテストに関する@stefmikhailのコメントに対応するため、ここに違いがあります。

一意のIDを検索することは、ページ上に1つのIDのみが存在する必要があり、エンジンはそれとそれだけを検索する必要があるため、常に最速です。 ただし、@ BoltClockが述べたように、この質問にはパフォーマンス以上のものがあります。

5


どちらかのセレクターエンジン(CSSまたはjQuery)をできるだけ具体的にする(つまり、タグを含める)方がパフォーマンスが高いと思いますが、違いに気付かないかもしれません。 jQueryコードで使用するセレクターについて議論しているjQuery作成者John Resigからの引用は次のとおりです。

_
たとえば、「。class」は「tag.class」よりもはるかに人気がありますが、2番目の方がはるかに高いパフォーマンスを発揮します。 これについて特に重要なことは、パフォーマンスへの影響の程度はそれほど問題ではないということです。 たとえば、4msと30msの違いはほとんど認識できません。 (http://ejohn.org/blog/selectors-that-people-actually-use/ [ソース])
_

1


jqueryでは、プレーンIDがドキュメント上の要素、次の要素を見つけることができる最速の方法です(今ではすべてのバージョンのブラウザーで最速と言います)。 jqueryは `document.getElementById`を使用してDOM要素を見つけるためです。 一方、Classはトリッキーな場合があり、シズルが実行されます。実際、div.fooは.fooよりも高速だと思います。これは、要素のコレクションがDOM内のすべての要素を検索するよりも低いためです。 最近のブラウザには、要素名を使用するよりも高速なクエリセレクタがあります(これについてはテストを行っていないことに注意してください)。 古いブラウザは.classよりも速くdiv.classを見つけますが、最新のブラウザでは逆に回避する必要があります。

1


WileyのSmashing CSSブックからこれを引用して “

_
3回すばやく言うのは難しく、完全に把握するのはさらに難しくなりますが、CSSルールの相互作用を理解するための鍵です。 特異性は、セレクタの「特異性」の数値表現です。 セレクターの特定の都市を決定するために使用される3つの事柄があります。
_

  1. すべての要素記述子は0,0,0,1を提供します。

  2. すべてのクラス、擬似クラス、または属性記述子が貢献します
    0,0,1,0。

  3. すべてのID記述子は0,1,0,0を提供します。 (まだ)びっくりしないでください! 取る
    最初にいくつかの例を見てください。 div ul ul li 0,0,0,4 4つの要素記述子div.aside ul li 0,0,1,3 1つのクラス記述子、3つの要素記述子a:hover 0,0,1,1 1つの擬似クラス記述子、1つ要素記述子div.navlinks a:hover 0,0,2,2 1つの擬似クラス記述子、1つのクラス記述子、2つの要素記述子:hash:title em 0,1,0,1 1つのID記述子、1つの要素記述子h1:hash :title em 0,1,0,2 1つのID記述子、2つの要素記述子 では、なぜコンマなのでしょうか? 特定の都市の価値の各「レベル」は、いわば独立しているからです。 単一のクラス記述子を持つセレクターは、13個の要素記述子を持つセレクターよりも特定の都市を持っています。」 「アクティブ」などのクラス名のいくつかは、望ましくない効果をもたらす複数の(インラインおよびブロックレベル)要素に適用される可能性があるためです。 これが何らかの形で助けられることを願っています…​乾杯!

1


個人的には、ふくろうのようにふたりの間を飛び回ります。

タグ名を見て、同僚(および同僚)が実際にどのような作業をしているのか、どのような動作を期待できるのかを思い出してください。

どちらを使用しても良いと思います。

最も自然に感じるもので行く(目を痛めない)

0


タイトルとURLをコピーしました