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

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

!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つの実用的な例は次のとおりです。

JavaScriptフレームワークと外部ライブラリ：これは、次のような人気のあるライブラリに適用されますブートストラップ、またノーマライズ。 CSSスタイルを直接編集することはできないため、CSSを独自の!importantルールでオーバーライドするしか選択肢がない場合があります。
ユーザースタイル：これは何年も前に非常に人気がありました。ユーザースタイルは、他の人/会社が所有するWebサイトに挿入する独自のCSSを作成する方法を提供します。たとえば、instagram.comのこのダークテーマ

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

Mozilla DeveloperNetworkとCSS-Tricksの人々は、!importantが実際には外国のCSSを扱う場合にのみ役立つことに同意しているようです。

結論

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

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