2

単純な質問で、おそらく CSS の経験不足を反映していますが...

スタイル シートを作成するときは、「*」ワイルド カードを明示的に指定するのが好きなので、次のようにします。

*.TitleText {

ただの代わりに

.TitleText {

TitleText は「任意の」タグに適用され、後続の h1.TitleText によってオーバーライドできることを思い出しました。長い間、CSS セレクターの概念全体を適切に理解できず、2 番目 (上記) が最初の省略形であることに気付いたとき、多くのことが「クリック」されたので、これが好きなのかもしれません。

私が行っていることは悪い習慣なのか、良い習慣なのか、それともそのどちらでもないのか?

4

12 に答える 12

7

良いか悪いかは分かりませんが、私は数年前からWebアプリ開発の一環としてCSSの仕事をしてきましたが、*という文字を使っている人を見たことがありません。

于 2008-12-17T22:23:22.707 に答える
2

どちらもスタイルの結果に関しては同等ですが、覚えておくべき他のいくつかの要因があります。

使用*するとファイルサイズが大きくなります

不要なアスタリスクを削除するCSSミニファイア（余分な空白などの不要なデータを削除する）を使用しない場合*、タグが指定されていないたびに使用すると、ファイルにかなりの余分な文字が含まれ、読み込み時間が長くなります（およびより多くの帯域幅の使用）。大きなファイルを調べて、すでに配置されているアスタリスクを削除することはしませんが（本当にそうする時間があり、何年も発見できないバグを引き起こす可能性のある退屈なタスクが好きでない限り）、不要なアスタリスクを含めないことをお勧めします新しいスタイルを作成するとき、および古いスタイルを編集するときに不要なアスタリスクを削除するとき。

使用*すると混乱を招く可能性があります

不要なときに使用*すると、混乱を招く可能性があります。特に、新しい誰かがプロジェクトに取り組んでいて、不要なとき*に存在することに対処していない場合（これは非常に一般的です）。

例

/** 
 * This matches an element with the class `alert` within
 * any element within an `article` element
 */
article * .alert { /* ... */ }

vs

/** 
 * This matches an element with the class `alert` within
 * an `article` element
 */
article *.alert { /* ... */ }

プロジェクトに100％の一貫性がある場合（そしてそのスタイルがプロジェクトに取り組んでいるすべての個人に知られている場合）、最初の例は決して起こりません（article * *.alert代わりにそうなります）。ただし、これは理想的な状況であり、数世代の開発者の後に崩壊する可能性が高くなります（人々は代わりに独自のスタイルを使用するのが大好きです）。そのため、一貫したスタイルを使用している場合でも、新入社員が入ってきて独自のスタイルで短時間書き込みを行ったり、現在のスタイルを誤って読み取ってセレクターと一致しないコードを生成したりする可能性があります（またはその逆）。したがって、プロジェクトやWebサイトで最も多く見た（読む：排他的に）標準に固執することをお勧めします。

不要な場合は、アスタリスクを使用しないでください。

いくつかの有名なWebサイト（Facebook、Google、Yahooなど）のソースをざっと見てみると、必要がない限り（縮小されていないスタイルでも）アスタリスクを使用していないことがわかります。GitHubでいくつかのオープンソースプロジェクトを確認することもできます。

結論

アスタリスクは、絶対に必要な場合にのみ使用する必要があります（たとえば、body * p本文以外の親を持つ段落と一致させる場合など）。これは書かれていない標準であるだけでなく（そして混乱を引き起こす可能性が低い）、スタイルシートのファイルサイズを小さくし、ウェブサイトの読み込み速度を上げます。

于 2012-02-23T20:59:17.603 に答える
1

CSS仕様によると：

5.3ユニバーサルセレクター

「*」と書かれたユニバーサルセレクターは、任意の要素タイプの名前と一致します。ドキュメントツリー内の任意の1つの要素と一致します。

ユニバーサルセレクターがシンプルセレクターの唯一のコンポーネントではない場合、「*」は省略できます。例えば：

  • *[lang=fr]と[lang=fr]は同等です。
  • *.warningと.warningは同等です。
  • *#myidと#myidは同等です。

Therefore, .TitleText and *.TitleText are equivalent. It is highly unlikely that any implementation would have a performance consideration for *.xxx which is not there for .xxx.

This then boils down to a question of style. And since the considerations of style raised by the other answers seem to be to be largely moot, I believe I will go ahead and continue explicitly specifying the *.

于 2008-12-29T23:06:14.993 に答える
1

個人的には、すべてのタグにルールを適用するときに * のみを使用する傾向があります。*.class{} の場合は冗長ですが、.class *{} の場合は便利です。

* セレクターがパフォーマンスに影響を与える可能性があることをいくつかの場所で読みましたが、確認していません。私は一般的にもう少し明確にすることを好むので、必要がない限り、私が使用するものではありませんが、それは単なる個人的な好みです.

于 2008-12-17T22:38:28.493 に答える
0

それは重要ではないと思いますが、私が学んでいたときに見た例のどれもそのワイルドカード形式を使用していなかったので、アスタリスクなしで行うことを学びました。

また、CSSを生成するツールはどれもそのようには機能しないため、アスタリスクを使用すると、CSSをそのようなツールに入れることを選択した場合に、自動ツールがフォーマットを消去するリスクがあります。

他のほとんどのWeb開発者との一貫性を保つために、アスタリスクを廃止することをお勧めします。そうすれば、他の開発者にアスタリスクを付けた理由を尋ねる必要がなくなります。

于 2008-12-17T22:26:14.587 に答える
0

* は暗黙的だと思うので、同じことをします。

よくわかりませんが、次のようにすると問題が発生する可能性があります。

span.style { color: red; }
*.style { color: blue; }

* スタイルはおそらく span スタイルをオーバーライドします。span.style はより具体的なセレクターであるため、間違っている可能性があります。

理由は完全にわかりますが、あなたがそうするのはかなり面白いと思います！CSS で DOS プロンプト/シェル構文を使用しています。結局のところ、シェルではファイル拡張子を見ているのに、CSS では実際にはクラスにマッピングしているので、そのように考えるとさらに混乱することになるかもしれません。

つまり、クラスセレクターでは機能しますが、ID セレクターでは機能しません。例えば：

span#id { ... }
*#id { ... }

...そして、シェル構文のようには見えなくなりました。:)個人的には、混乱するかもしれないので、あなたがやっているようにはしませんが、あなたが何かを壊しているとは思いません。

于 2008-12-17T22:37:01.633 に答える
0

* が「世界で可能なすべてのもの」を意味すると仮定すると、 * がないことも同じことを意味します。私は通常 *{margin:0; を使用します。padding:0} を undo.css で使用して margin と paddings をリセットしますが、疑似セレクターとして使用することはありません。

于 2008-12-17T22:46:18.900 に答える