CSS!importantRuleをいつ使用する必要がありますか?
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つの実用的な例は次のとおりです。
- JavaScriptフレームワークと外部ライブラリ :これは、次のような人気のあるライブラリに適用されますブートストラップ 、 またノーマライズ 。 CSSスタイルを直接編集することはできないため、CSSを独自のスタイルでオーバーライドするしか選択肢がない場合があります
!important
ルール。 - ユーザースタイル:これは何年も前に非常に人気がありました。 ユーザースタイルは、他の人/会社が所有するWebサイトに挿入する独自のCSSを作成する方法を提供します。 たとえば、instagram.comのこのダークテーマ
外国のCSSはあなたが変更することはできないので(Instagramでダークモードの深刻な欠如を修正するために仕事をしない限り)、 !important
ルールは本当にあなたの唯一の、そして最良の選択肢です。
Mozilla DeveloperNetworkとCSS-Tricksの人々はそれに同意しているようです !important
本当に外国のCSSを扱う場合にのみ役立ちます
結論
本当に使いたくなったら !important
、あなたが下すことができるアーキテクチャ上の決定について考えてみてください。 CSSだけではありません。 これは、新しいHTMLタグを追加するか、新しいクラス/IDを適用することを意味する場合があります。 このアーキテクチャ中心のプラクティスに従事することで、維持するのが楽しい高品質のコードが得られます。 🤓
他の適切な用途を見つけましたか !important
? @alligatorio でツイートして、共有してください。