web-dev-qa-db-ja.com

CSSのセレクターでIDの代わりに何を使用するか

Atomテキストエディター用のcsslintパッケージを最近インストールしました。「セレクターでIDを使用しないでください」という警告が何度も表示されます。セレクターで常にIDを使用してきたので、これは奇妙なことに気付きましたCSSでは、私は実際にそれらを使用してコーディングまたは構文上の問題に遭遇していません。

StackOverflowで、私は this one のような投稿を見つけました。クラスよりも優先されているので、IDを使用するべきではないと述べています。ただし、クラスより優先されるため、IDを使用する必要があると述べている 別の投稿 を見つけました。これらの投稿は両方とも理解していますが、引き続き使用する必要があるかどうかはわかりません。

例としてこのコードがあるとしましょう：

HTML

<div id="opening-subject-container">
    <div class="subject"></div>
    <div class="subject"></div>
    <div class="subject"></div>
</div>
<div id="body-subject-container">
    <div class="subject"></div>
    <div class="subject"></div>
    <div class="subject"></div>
</div>

CSS

.subject {
    width: 100%;
    height: 20px;
}
#opening-subject-container .subject {
    background-color: red;
}
#body-subject-container .subject {
    background-color: blue;
}

ここで、開始コンテナーの最初のsubjectsを赤にし、本体コンテナーの残りのsubjectsを青にしたいと思います。

CSSセレクターでIDを使用するべきではない場合、代わりに何を使用すればよいですか？

みんなのアドバイスありがとうございます。 IDは使いやすく、IDを使用する必要がある場合と使用しない場合を追跡できるため、IDを使用することにしました。 lintの警告メッセージに飽きたので、ソースコードを変更して、このような警告を表示するルールをいくつか削除しました。

coding-stylecoding-standardshtmlcss
6
Leo C Han

IDは一意である必要がありますが、クラスはいくつかの要素のスタイルをグループ化する傾向があります。私はそれをこの類比としてどこかで読んだ：

_<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />
_

学生証は異なります。キャンパス内の2人の学生が同じ学生IDカードを持つことはありません。ただし、多くの学生は、少なくとも1つのクラスを互いに共有できます。

さらに、ID要素は他のセレクターよりも優先度が高くなる傾向があるため、ルールを再適用することが難しくなります。同じID要素の最初の出現のみを選択する一部のJS関数についても、stackoverflowの回答がありました（リンクをできるだけ早く含めます）。

編集：jsでgetElementByID()を使用して一連の要素を取得してみてください。そうすれば、私が言っていたことがわかります。

一方、IMOでは、CSSルールについてCSSLINTの苦情を厳しく受け取らないでください。それらのいくつかは、本質的に欠陥があります。

参照

6
Abhinav Gauniyal

それに同意する人にとって、議論の要点はclassではなくcssセレクターにidを使用することだと思います。これにより、意図しないcss優先ルールが実行されるのを防ぎます。

何をしているのか（クラスセレクターとIDセレクターについて）がわかっていて、それが機能する場合は、変更するためだけに変更することはしません。

から http://csslint.net/about.html ：

これらのルールはHTMLとの結合が強すぎ、再利用の可能性がないため、IDをセレクターで使用しないでください。セレクターでクラスを使用してから、ページ内の要素にクラスを適用することをお勧めします。

5
Eric King

OPの質問に対する明確な答え-「IDの代わりに何を使用するか？」 -「クラス」です。

メニューを含むすべてのページにdivがあるとします。また、IDを使用してこのメ​​ニューをターゲットとするJavaScriptがあるとします。これは...ああ、わかりません... id="menu"。

メニューは順不同のリストで構成されており、CSSを使用してこれを通常の箇条書きリストからメニューのようなものに変えています。これまでのところ、従来型。

Lintが言っているのは、ページにメニューが1つしかないこと、およびメニュータイプのスタイル設定を他の順序付けられていないリストに適用したくないこと、そしてメニュースタイルを上書きすることです。他のすべての順序付けられていないリストに適用する一般的なスタイルがあれば、自分のスタイルを#menuに向けることはお勧めできません。論理的には、したがって、私のdivは次のようになります。

<div id="menu" class="menu">My menu code here</div>

当然のことながら、メニューを一度しか表示しないので、各ページの1か所だけに「メニュー」クラスを適用するように注意する必要があります。

</ sarcasm-mode>

Lintの提案（およびIDを選択することへの反対意見）は正当化される場合がありますが、上の例は、厳格な規則として適用するのがばかげていることを示しています。 「構造的」なページのコンテンツがあり、純粋にページごとに1回のみ-ヘッダー。メニュー;フッター; etc-これらの要素はIDによって正しく識別され、CSSで同じ方法で正しく選択されます。

3
Paul Clark

IDで選択する理由はたくさんあります。 lintからのそのメッセージの精神は、主にクラスによるスタイリングを適用する必要があるということだと思います。

IDによる選択は、類似の要素間でスタイルが共有されるexception、exceptこれ、またはonlyこれです。

クラスを使用してIDとして機能することもできますが、それはおそらく伝道だと思います。それは、テーブルが完全に適切な場合でも、テーブルを使用しないことを主張する人のようなものです。

2
Andrew Hoffman

これは私が一般的に固執するものです。

私の意見では、別個のcssファイルを作成する主な目的は、複数のページでファイルを共有して、スタイルをさまざまな方法で使用できるようにすることです。 IDの代わりにcssクラスを使用することで制限が緩和され、IDの重複を心配する必要がなくなります。一方、具体性が低いほど、スタイルのカスタマイズが容易になります（別のcssファイルまたはHTMLヘッドで）。

HTMLヘッドでCSSを記述する場合、ページ上の特定の要素を参照しているときはIDを使用すると問題ないと思います。後で、CSS参照IDが別のページで役立つと判断する場合があります。インラインではなく先頭にcssを保持している限り、IDを適切なクラスに置き換えて、別のcssファイルにリファクタリングするのは簡単です。

1
Zantier

IDの使用はシングルトンの使用に似ており、シングルトンはあまり良いスタイルではありません。プロトタイプの場合は、そうですが、物事を正しくしようとしているのであれば、確信がない限り、「この種のものは常に1度だけここにある」と思い込まないでください。 1だけでなく、0や多くの準備をする方が柔軟性があります。

そしてもちろん、CSSの優先順位も有効な懸念事項です。

例えば。あなたの例ではclass="opening subject-container"およびclass="body subject-container"そして、スタイルがすべてに適用できる場合は、自分で選択できます.opening物事または.opening.subject-container、それに加えて、すべてに共通のスタイルを設定できます.subject-containersも同様です。単なる可能な例です。

0
herby