CSSの大量の!importantは変数(カスタムプロパティ)で削減可能

CSSの!importantとは

スタイルシートの適用される優先順位を上げることができる宣言です。

例えば.foo .bar { color: #f00; } よりも .baz { color: #00f !important; } のほうが優先順位が高くなるので後者が適用されます。

.foo .bar {
  color: #f00;
}

.baz {
  color: #00f !important;
}

!importantを付けると優先順位が一気に上がってしまうため、以下のようにaタグなどに付いていると!importantをたくさん付けなくてはいけなくなります。

a {
  color: #000 !important;
}

.red {
  color: red !important;
}

.orange {
  color: orange !important;
}

.green {
  color: green !important;
}

!importantをたくさん使用しているサンプル

この問題はCSSの変数(カスタムプロパティ)を使用して上書きを行い、以下のように書けば解決できます。

a {
  color: #000 !important;
}

a {
  color: var(--link-color) !important;
}

.red {
  --link-color: red;
}

.orange {
  --link-color: orange;
}

.green {
  --link-color: green;
}

CSSの変数で!importantを減らしたサンプル

読み込んだCSSファイル内に!importantが使用されていることがたまにありますが、!importantを使いまくるとコードの可読性が低下するので、代わりに変数(カスタムプロパティ)をうまく利用して!importantの記述は減らすことをオススメします。