開発者ドキュメント

CSS！importantRuleをいつ使用する必要がありますか？

getdocs

The !important CSSのルールは、スタイルをオーバーライドする機能を提供しますが、この力は、孤独なソフトウェア開発者にとっては大きすぎますか？ この記事を読んで、それが何であるか、そしていつそれを使用するのが良いかを調べてください！

The !important ルールは、CSSスタイルの自然なカスケードをオーバーライドする機能があるため、特別です。

次のHTML/CSSコードを検討してください…テキストはどのような色になると思いますか？

<div>
  <h1 id="title">Sir Chompsalot</h1>
</div>

div h1 {
  color: blue !important;
}

div h1 {
  color: green;
}

通常、同じ特異性を持つ2つのCSSルールがある場合、後者のルールが優先されます。 この場合、前のCSSルールは、強力であるという理由だけで、後のルールよりも優れています。 !important ルール。

テキストは青です！

同じHTMLマークアップを使用して、ターゲットを設定することでさらに具体的にした場合はどうなりますか body タグと h1#title?

div h1 {
  color: blue !important;
}

body div h1#title {
  color: green;
}

これには、オーバーライドする機能がありますか !important ルール？

いいえ！ うわー、 !important ルールはそれ自体の利益のためにほとんど強力すぎます。

💪🤖💪

以来 !important CSSの予想される動作と矛盾するため、通常は使用を避けることをお勧めします。 あなたが頼るなら !important あまりにも頻繁にそれは将来的に多くの予期しない振る舞いを引き起こす可能性があり、新しい開発者は彼らのCSSをデバッグするのに苦労するでしょう。 このテキストの色が変わっていないのはなぜですか。 😂

これは絶対に使用してはいけないという意味ですか？

使用する機会！重要

時間が経つにつれて !important CSSに導入されたのは、外部CSSの処理という単一のジョブにのみ実際に役立つというコンセンサスがあるようです。

外部CSSは基本的に、自分自身を変更または改善する直接的な能力を持たないCSSです。 外部CSSの2つの実用的な例は次のとおりです。

外国のCSSはあなたが変更することはできないので（Instagramでダークモードの深刻な欠如を修正するために仕事をしない限り）、 !important ルールは本当にあなたの唯一の、そして最良の選択肢です。

Mozilla DeveloperNetworkとCSS-Tricksの人々はそれに同意しているようです !important 本当に外国のCSSを扱う場合にのみ役立ちます

結論

本当に使いたくなったら !important、あなたが下すことができるアーキテクチャ上の決定について考えてみてください。 CSSだけではありません。 これは、新しいHTMLタグを追加するか、新しいクラス/IDを適用することを意味する場合があります。 このアーキテクチャ中心のプラクティスに従事することで、維持するのが楽しい高品質のコードが得られます。 🤓

他の適切な用途を見つけましたか !important? @alligatorio でツイートして、共有してください。

モバイルバージョンを終了