【CSS Modules】!importantキーワードの使い方

!important定数は、CSSの宣言において、その宣言の優先順位を強制的に最高位に引き上げるべきであるという特別な意味を表す定数です。このキーワードは、特定のスタイル宣言の末尾に付加することで、ブラウザがそのスタイルを他のほとんどのスタイルよりも優先して適用するように指示します。

通常、CSSのスタイル適用には詳細度、ソースの順序、継承といった優先順位のルールが存在しますが、!importantを使用すると、これらの通常のルールを上書きし、最も高い優先度でスタイルが適用されます。例えば、color: blue !important; と記述された場合、他のいかなるcolor指定があっても、この宣言が優先されます。

!importantは主に、外部ライブラリやフレームワークによって定義されたスタイルや、ユーザーエージェント（ブラウザのデフォルト）スタイルシートを上書きしたい場合、あるいは特定の要素に絶対に適用させたいスタイルがある場合に利用されます。しかし、!importantを多用すると、CSSの詳細度ルールが複雑になり、スタイルの変更やデバッグが困難になるため、一般的には必要な場面に限定して慎重に使用することが推奨されます。通常のCSSルールで解決できる場合は、!importantの使用を避けるべきです。この定数を用いることで、緊急性のあるスタイル適用が可能になりますが、過度な使用はコードの保守性を損なうため注意が必要です。

Copy
1セレクタ {
2  プロパティ: 値 !important;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません