it-swarm-ja.tech

CSSスターセレクターは有害であると考えられていますか(そしてその理由)?

CSSのスターセレクターはページレンダリングのパフォーマンスに影響しますか?

それを使用する際の注意点はありますか?

* {
  margin:0;
  padding:0;
}
36
gpilotino

パフォーマンスに関して言えば、スティーブ・スーダーズはtheman:

レポートの1つからの恥知らずな引用:

CSSセレクターを最適化するための鍵は、キーセレクター(一致?)とも呼ばれる右端のセレクターに焦点を当てることです。これははるかに高価なセレクターです:A.class0007 * {}。このセレクターは単純に見えるかもしれませんが、ブラウザーが一致するのはより高価です。 ブラウザは右から左に移動するため、キーセレクタ「*」に一致するすべての要素をチェックすることから始めます。これは、ブラウザがこのセレクタをページ内のすべての要素と照合する必要があることを意味します。

[太字強調鉱山]

57
anddoutoi

一部のプロパティでは、*を使用すると予期しない結果が生じる可能性があります。

* { color: blue }
li { color: red }

<li><i>text</i></li>を指定すると、テキストは青色になります。

16
Roger Pate

1つの見方は、*がパフォーマンスの問題であるということではなく、古き良きお気に入りです。IEの問題があります。これは、IE 5、5.5、6、およびMacintoshのバリアント。基本的に、HTMLスターセレクターバグと呼ばれるものがあり、次のように適用されます。

* html

Htmlはルートであり、子要素にはできないため、これは要素が一致しないと解釈する必要があります。 IEはこれをhtmlとして解釈します。

* * body

繰り返しになりますが、bodyはHTMLの子要素であっても、孫要素にすることはできないため、どの要素にも一致しないはずです。 IEはこれを*本体として解釈します。

* html body

これはどの要素とも一致しないはずですが、IEはこれをhtml本体として解釈します。

パフォーマンス面では通常、*を適用すると、スタイルがページ内のすべての要素に適用されることを意味するだけであると見なされます。これがそれ自体で問題になることはめったにありません。問題になるポイントは、とにかくマークアップが多すぎることを意味します。同様に、それはすべてに当てはまるので、そのスタイルを持つべきではない要素に対処するためにコードを増やす必要があることを意味します。他のすべてと同様に、トレードオフとバランスを決定するのはあなた次第です。

6
Pete OHanlon

私はすべてのプロジェクトでまったく同じルールを使用しており、パフォーマンスに深刻な問題があるものはないので、次のように言います。いいえ、私が知る限りではありません。

0
F.P