[解決済み】CSSで"!important "を使用する意味は？[重複あり］

質問

数ヶ月前からウェブサイトを制作しているのですが、何かを編集しようとするときに、多くの場合 !important , 例えば :

div.myDiv { 
    width: 400px !important;
}

を、期待通りに表示させるために これは悪い習慣なのでしょうか？それとも !important コマンドは使ってもいいのでしょうか？これによって、さらに何か好ましくないことが起こる可能性はありますか？

どのように解決するのですか？

そうですね、あなたの例のように !important は悪い習慣であり、将来的に望ましくない影響を引き起こす可能性が非常に高いです。だからといって、絶対に使ってはいけないというわけではありませんが。

の何が問題なのでしょうか？ !important :

特異性 は、CSSがページにどのような影響を与えるかをブラウザが判断する際に働く主要な力の1つです。セレクタがより具体的であればあるほど、そのセレクタはより重要視されます。これは通常、選択された要素の出現頻度と一致します。例えば

button { 
    color: black; 
}
button.highlight { 
    color: blue; 
    font-size: 1.5em;
}
button#buyNow { 
    color: green; 
    font-size: 2em;
}

このページでは、ボタンはすべて黒色です。ただし、クラス "highlight" を持つボタンは青色です。ただし、IDが "buyNow"のユニークなボタンは、緑色になっています。ルール全体（この場合は色とフォントサイズの両方）の重要性は、セレクタの特異性によって管理されます。

!important しかし、これはセレクタレベルではなく、プロパティレベルで追加されます。例えば、このようなルールを使った場合。

button.highlight {
    color: blue !important;
    font-size: 1.5em;
}

であれば、color プロパティは font-size よりも高い重要性を持つことになります。実際、色のほうが button#buyNow セレクタで、font-sizeとは対照的に（これはまだ通常のID対クラスの特異性によって支配されています）。

要素 <button class="highlight" id="buyNow"> の場合、font-sizeは 2em しかし、色 blue .

これには2つの意味がある。

1. セレクタは、その中のすべてのルールの重要性を正確に伝えていません。
2. その のみ 青色をオーバーライドする方法は 別の !important の宣言で、例えば button#buyNow セレクタを使用します。

これは、スタイルシートの保守とデバッグを難しくするだけでなく、雪だるま式に増えていきます。ひとつは !important は、それを上書きする別のもの、さらにそれを上書きする別のもの、などなど。1つだけに留まることはほとんどないのです。たとえ1つの !important 短期的な解決策としては有効ですが、長い目で見ると痛い目を見ることになります。

いつ使ってもいいのか。

• ユーザースタイルシートのスタイルをオーバーライドする。

これは !important はそもそも、ウェブサイトのスタイルを上書きする手段をユーザーに提供するために考案されました。これは、スクリーンリーダーや広告ブロックなどのアクセシビリティツールで多く使用されています。

• サードパーティのコードやインラインスタイルをオーバーライドします。

一般的には、これはコード・スモークのケースだと思いますが、どうしても避けられない場合もあります。開発者である以上、自分のコードをできる限りコントロールすることを目指すべきですが、手が縛られ、あるものを使って仕事をしなければならない場合もあります。使用方法 !important を惜しまないでください。

• ユーティリティクラス

多くのライブラリやフレームワークには、以下のようなユーティリティクラスが付属しています。 .hidden , .error または .clearfix . これらは単一の目的を果たすもので、多くの場合、非常に少ない、しかし非常に重要な規則を適用します。( display: none に対して .hidden クラスなど)。これらは、現在要素にある他のどのようなスタイルもオーバーライドするはずであり、確実に !important と言われれば、そうなんですが。

まとめ

を使用しています。 !important 宣言は、CSS の中核的な仕組みのひとつである「特異性」を台無しにする副作用があるため、しばしばバッドプラクティスとみなされます。多くの場合、この宣言の使用は CSS アーキテクチャが貧弱であることを示す可能性があります。

許容できる、あるいは望ましいケースもありますが、使用する前に、それらのケースのいずれかが実際に自分の状況に当てはまるかどうかを再確認してください。