27

CSS Lintでは、id要素の選択にを使用することはお勧めしません。CSS Lintは、CSSを非常によく知っている賢い人々によって書かれているので、私は信頼しています。しかし、私はこれの理由が何であるか知りたいですか？なぜ悪いことで選択するのidですか？

4

6 に答える 6

29

要素の選択にIDを使用しないという考えには同意しませんが、その理由は理解しています。

多くの場合、開発者は、一般的な形式で十分な場合に、非常に高い特異性のセレクターを使用します。

#foo #bar #baz .something a {
    text-decoration: underline;
}

おそらく次のように書く方が良いでしょう

.something a {
     text-decoration: underline;
}

さらに、次のような文体もあります。

#foo-1,
#foo-2,
#foo-3,
#foo-4 {
    color: #F00;
}

次のように書く方が良いです：

.foo {
    color: #F00;
}

私がCSSLintと異なるところは、再利用される構造IDを含みます。

私はよくこの構造でページをマークアップします：

<div id="page">
    <div id="page-inner">
        <header id="header">
            <div id="header-inner"></div>
        </header>
        <nav id="nav">
            <div id="nav-inner"></div>
        </nav>
        <div id="wrapper">
            <div id="wrapper-inner">
                <div id="content">
                    <div id="content-inner">
                        <article></article>
                        ...
                    </div>
                </div>
                <div id="sidebar">
                    <div id="sidebar-inner">
                        <div class="module"></div>
                        ...
                    </div>
                </div>
            </div>
        </div>
        <footer id="footer">
            <div id="footer-inner"></div>
        </footer>
    </div>
</div>

また、構造が一貫していることを知っているので、地域固有のスタイルをスイープするために、cssで、、、、、、、を使用し#pageてもかまいません。これらのスタイルは、この特定の構造と緊密に結合されているため、再利用性が低くなります。構造を再利用しているので、再利用できます。覚えておくべき重要なことは、セレクターでIDを使用することは非常に具体的であり、慎重に使用する必要があるということです。#header#nav#wrapper#content#sidebar#footer

特異性に関するいくつかの言葉：

一般的に言えば、正しい選択を行うために可能な限り低い特異性セレクターを使用する必要があります。

すべての<a>要素をターゲットにしている場合は、を使用するのが理にかなっていますa。内のすべての要素
をターゲットにしている場合は、を使用するのが理にかなっています。内のすべての要素 をターゲットにしている場合は、を使用するのが理にかなっています。ただし、より低い特異性のセレクターを使用することもできます。はと同じ特異性を持っています。つまり、不必要に高い特異性を持つセレクターを作成しなくても、IDによって特定の要素をターゲットにすることができます。<a><div class="foo">.foo a
<a><div id="bar">#bar a[id="bar"] a.foo a

属性を選択するためにセレクターを使用することは一般的にお勧めしません。これは冗長であり、混乱を招く可能性があるためです。カスタム属性に基づいて選択するためにセレクターを使用して、スタイルをDOMノードの現在の状態により密接に関連付けることをお勧めします。[id="XXXX"][id][data-id="XXXX"][data-*]

于 2011-11-10T18:50:58.263 に答える
27

CSSLintは、推奨事項を作成する理由についてのガイドを提供します。

IDはセレクターで使用しないでください。これらのルールはHTMLと緊密に結合されており、再利用の可能性がないためです。セレクターでクラスを使用してから、ページ内の要素にクラスを適用することをお勧めします。さらに、IDはあなたの特異性に影響を与え、特異性戦争につながる可能性があります。

（セレクターのIDを許可しないから。）

基本的に、IDではなくクラスを使用するようにコードを構造化すると、コードはより一般的で再利用可能になります。これは一般的に良いことです。さらに、特異性は頭を悩ますことであり、見つけるのが難しいバグを引き起こす可能性があるため、IDセレクターを省略すると、予期しない方法で競合するルールが解決される可能性が低くなります。

于 2011-11-10T18:38:04.513 に答える
20

初めに：

CSS Lintは、JS lintと同様に、検証を装った意見であり、権限ではありません。

私はこれに5年間います。私は非常に大規模な小売サイトで、インタラクティブな代理店で、単独の請負業者として働いており、現在はSaaS会社にいます。

IDが明らかに悪いという考え、IMOは、チームの扱いに関してCSS-fuが最初からそれほど素晴らしいものではなかった場合に到達できるアイデアにすぎません。

優れた柔軟なCSSであるIMOは、次の一般的なベストプラクティスに従います。

  • 常に一般から特定に移動します。たとえば、一般的な本文テキストのフォントファミリおよび最も一般的なフォントサイズは、1か所でのみ宣言する必要があります。より一般的にクラスの使用を伴うセレクターに移動すると、font-sizeをオーバーライドし始めます。ほとんど使用されていないフォントファミリをHTMLの非常に特定のサブセットに適用するときは、コンテナのIDを使用して、本文のテキストのバリエーションを取得する要素をヒットすることが理にかなっています。

  • プロパティがより一般的に適用されるほど、オーバーライドが容易になり、最も一般的なプロパティが誤って上書きされることを心配する必要はありません。これは、例えば、body#some_id divは、その理由で使用するのに非常に悪いセレクターです。通常、クラス化されたコンテナに関連付けられた、一般的に再利用される要素のバンドルをより多く処理する2番目の層（3 ... ishがあります）では、これらのプロパティを誤って上書きするのは少し難しいはずです。「偶然」はもっと頻繁に起こります、IMO、あなたがいたるところに複数のクラスのセレクターの山を持っているとき。最後の層では、再利用可能な要素ではなく、ドキュメントの非常に特定のセクションのオーバーライドを処理する必要があります。このような状況でIDを使用することは理想的な方法であり、悪い方法ではありませんが、IDは慎重に使用し、IDが実際に変更する必要があるアイテムコンテナ内の要素の特定のプロパティに対してのみ使用するのが最適です。

  • セレクターが具体的であればあるほど、誤ってセレクターを壊すのは難しくなります。具体的には、要素のIDだけを意味するのではありません。つまり、実際にターゲットにしている要素の近くにあるID化されたコンテナ要素を意味します。ただし、意図的にオーバーライドする場合は、常に最小限の労力で行う必要があります。これは、IDが邪魔になるのではなく、実際に役立つ場合です（以下の例を参照）。「ID、クラス、タグが不足している」という立場に陥った場合は、暴力（少なくとも架空の暴力）をお勧めします。しかし、真剣に、誰かが打たれるに値する。

  • 長いセレクターリストは避けてください。宣言に4つ以上のセレクター値を定期的に使用するときはいつでも、「間違っている」と感じ始める必要があります。>を賢く使用することは保守性とパフォーマンスの両方にとって優れた方法であるため、集計時にタグ/値としてカウントすることはありません。

  • 特異性の軍拡競争を避ける：あなたはその男を知っています。お尻を覆う最善の方法を決めた「私のものを台無しにしないでください」ルーキーは、彼が体から始めることができるすべてのタグ、セレクターとIDを使うことでした。彼が止まるまでその男を雇ったり、彼を叩いたりしないでください。しかし、より前向きなチームであっても、意味のある場所でセレクターに（控えめに）重みを加えなければ、軍拡競争は無邪気に開始できます。

特にミニマリストのアプローチは巨大です。そもそもCSSの必要性を回避するためにHTML配置に依存すればするほど、より良い結果が得られます。最も一般的なスタイルをグローバルに配布する際に行った作業が優れているほど、より具体的なコンテキストで心配する必要が少なくなります。より正確にターゲットを絞った、非常に具体的なプロパティオーバーライドが多いほど、長期的な管理が容易になります。そして、これは包括的な非IDポリシーが愚かなIMOであるところです。

オーバーライドするのに、より実用的で簡単なものは何ですか？

これ：

body .main-content .side-bar .sub-nav > ul > li > button

それともこれ？

#sub-nav button

あなたが一般的に一人で仕事をしている場合、またはスピーキングエンゲージメントで本当のお金を稼ぎながら生計を立てるためにウェブ開発をしているように見せるために小さなプロジェクトだけをしている場合、上の方はばかげているように見えるかもしれませんが、チームとあなたが仕事をしているとき「クラスのみのポリシーに従っていて、最近十分に高い特異性を使用していないためにやけどを負ったばかりです。短い期限でのトラブルを避けるために、クラスやタグを追加するのは非常に簡単です。もちろん後で元に戻します）、CSSファイルに予測できない複雑な混乱が発生します。

したがって、複数のIDを使用しないようにし、他のコンテナを含まないコンテナに対してローカルなプロパティにのみ使用するようにしてください。1つまたは2つを超えるクラスを使用しないようにしてください。上から要素をターゲットとするクラスとIDは避けてください（それらが表すコンテナーは、上記の多くの祖先ノードです）。ルーキーのメンテナンスやトレーニング/スパンキングの時間になるまで、ほとんどの場合、3〜4個を超えるタグは多すぎます。そして、ボーイスカウトのルールに従ってください。安全なときに、これらの重要なセレクターと明らかに過度に特定のセレクターをザッピングします。

ただし、CSSの「法則」ではなく経験則に固執し、経験に照らしてこれらのアイデアを評価するようにしてください。CSSレイアウトシナリオで可能な限り多くの変数を持つものに対して、「IDを使用しない」などの包括的なステートメントを吐き出す人やツールを信用しないでください。私に関する限り、これは単なるクールエイドであり、責任のある作者は、専門家であると主張したいのであれば、今ではもっとよく知っているはずです。

于 2012-08-24T03:09:40.867 に答える
4

彼らの議論は、孤独なことに彼らの答えの中で言及されており、それはそれをHTMLに緊密に結合し、再利用を許可しないというものです。

単一の要素以外でスタイルを使用したくない場合があるので、idセレクターでそれを指定することは理にかなっていると私は主張することができます。

それはすべて個人的な好みに帰着するでしょう。これは、順守しなければならない厳格なルールではありません。エラーなどを引き起こすルールではなく、CSSLintチームの考えであるように見えます。

于 2011-11-10T18:42:44.867 に答える
3

多くのCSSや大規模なWebサイトを管理している場合、大きな問題が発生します。定義上、IDは再利用できません。しかし、あなたはまた、特異性の問題に直面します。特異性を変え始めると、スタイルのある厄介な競合状態に陥ります。IDはクラスよりも特異性がありますが、インラインスタイルにはID以上のものがあります。インラインスタイルは、外部スタイルシートよりも特異性があります。クラスを使用することで、要素にスタイルを適用する方法を標準化し、物事をより予測しやすくします。これにより、特に複数の人と作業する場合に、開発が容易になる傾向があります。

于 2012-03-15T14:08:30.923 に答える
0

コンポーネント：再利用可能なコンポーネント（たとえば、ID（eg <div id="data">）を持つテーブル）を作成する場合、2つのテーブルを1つのドキュメントに入れると、無効なhtmlが取得されます。

于 2019-04-12T14:42:06.073 に答える