[CSS]!importantとは？

CSSのコードを見ていると(稀に)出てくる!important。

これってなに？という点から説明していきます。

!importantとは？

簡単に言うと、そのスタイルを最優先で反映させること。

CSSを書いていたら、時々「ちゃんと指定しているのにスタイルが反映されない！」ということがありませんか？

それ、ほとんどの場合CSSの優先順位によるものです。

つまり、指定したスタイルの優先順位が低く他の場所でスタイルが反映されているわけです。

そんな時に使えるのが!important。これは、優先順位が低くなってスタイルが反映されていないプロパティを最優先で反映することになります。

書き方はこんな感じ。

.class {
    background-color: #fff !important;
}

値の後ろ位に記述します。これで他で競合する優先順位の高いスタイルがあっても反映させることができます。

じゃあ、!importantを使えばすぐに解決？

!importantに関しは手放しで乱発するものでもありません。

!importantを使いすぎることで、メンテナンス性が下がるケースもあります。

特に複数人が関わるプロジェクトであれば、あまり使わない方がいいと思います。

まとめ

!importantはスタイルを最優先で適用してくれる。

しかし、メンテナンス性が下がるケースもあるので使用には注意ということでしょうか。