5

CSSでは、たとえばdivにスタイルを設定する場合、マッチングの精度を高める以外に、「div」を含めることには利点があります。ブラウザのレンダリングはおそらく速いですか？

すなわち：

div.something { font-size: 1em; }

より良い

.something { font-size: 1em; }

divのみに絞り込む以外の理由はありますか？

（私が尋ねる理由は、私が最近、'divを含む著名なサイトに出くわしたが、ほとんどは気にしない傾向があるということです）

アップデート：

すべての答えをありがとう。結論は、速度が要因ですが、目立たないので無視する価値があるということです。そして、ベストプラクティスに関するコンセンサスは、タグを含める方がクリーンであるということです。一般的なルールは、必要なスタイルに対してCSSを可能な限り「タイト」に保つことです。

4

9 に答える 9

5

両方のセレクターの異なるセマンティクスに加えて、これを読んでください: CSS の速度

于 2009-02-17T10:40:07.797 に答える
3

div 以外でクラスを使用する場合は、次のような一般的なクラスを使用できます。

.something{}

ただし、クラスが具体的であるほど、順序に関係なく、より目立つようになります。つまり、次のようになります。

#someID div.something { background: green; }
div.something { background: blue;}
.something { background: red; }

最初のものは最も具体的であるため：

<div class="something"> this will be blue </div>
<div id="someID">
  <div class="something">
    this will be green
  </div>
</div>
<p class="something">this will be red</div>
于 2009-02-17T10:40:21.990 に答える
2

要素セレクター (div) をルールに追加すると、ルールの特異性が高まり、一般的なクラス セレクター (.something) よりも重要になります。

また、CSS が読みやすくなります。すべてのクラス セレクターの前に要素が追加されていない場合、それはクラスがあいまいであり、どの要素にも適用できることを意味します。(これは意図的かもしれませんが、多くの場合そうではありません)

前述のように、要素名を使用することで速度のトレードオフがありますが、ほとんど目立ちません。

于 2009-02-17T10:42:49.100 に答える
1

そうですね、おっしゃる通り「divのみに絞り込む」というのが唯一の目的だと思います。したがって、それ<p class="something">はdivと同じかどうかにかかわらず動作するはずです...

于 2009-02-17T10:37:10.983 に答える
1

この問題は、変数やその他のリソースのスコープを最小限に制限するという、一般的によく知られているスコープ制限のプログラミングの概念と非常によく似ていると思います。

同様に、スタイルがそのクラスの div でのみ使用されることがわかっている場合、「クラスのスコープ」を div に制限することは理にかなっています。混乱が少なくなり、スタイルシートの保守がいくらか容易になります。

于 2009-02-17T10:37:17.177 に答える
0

クラスを別の場所で再利用しない限り、違いはありませんsomething。もちろん、CSS優先スキーマを使用して解決する必要のある競合はありません。この場合、より具体的でdiv.somethingあるため、より高い優先順位があります。CSS2仕様からセレクターの特異性を計算する.somethingを見てください。

于 2009-02-17T11:08:27.523 に答える
0

同じクラス名の他のタグに別の外観を持たせたい場合は、それを行うことをお勧めします。

読みやすくするためにタグ名を常に含めます。クラス名を共有している場合、他のルールをオーバーライドしないと確信しています。

于 2009-02-17T10:36:38.897 に答える
0

セレクターの先頭に div を追加すると、css ルールと html ドキュメントの間に追加の依存関係が作成されます。要素タイプを突然変更すると、正当な理由もなく css も変更する必要があります。

2 つのルールを区別するために要素タイプを指定する必要があるシナリオでは、代わりにクラス名を変更することをお勧めします。その div が常に div であるとは思わないでください。ap または fieldset または label の方が理にかなっているかもしれません。

不必要な依存関係を避けます。

CSS ルールの具体性が低いことは問題ですが、要素タイプを追加することは解決策ではありません。.price が div.price に変更された場合、意図しない一致の可能性はわずかに低下します。外側の #id を使用して名前空間を設定する方がはるかに優れています。

于 2009-02-17T10:41:14.593 に答える
0

クラスは、適切に構造化され、機能的で、アトミックでなければなりません。次のような状況が発生すると思われる場合は、 element.name に絞り込むとよい場合があります。

div.highlight {
    background: #FF00FF;
}

span.highlight, p.highlight {
    color: #FF00FF;
}

それ以外の場合は、次のようなことをする必要があります

.highlight {
    color: #FF00FF;
}

div.highlight {
    background; #FF00FF;
    color: inherit;
}

経験則として、1 つのクラス定義はそれに適用されるすべての要素に対して機能するべきだと思います。クラスのデフォルト定義をオーバーライドする必要がある特定の状況がある場合は、最初に、少なくとも新しいクラスを定義して、他の要素のプレゼンテーションを壊さないようにしてください。

また、セレクターに対するそのような構造的な依存関係をいつ回避するかを検討する必要があります。

div#main div.section h1.title span.link { }

でも書いたほうがいいよ

div#main span.link {}
于 2009-02-17T10:44:17.583 に答える