CSS importantが非推奨と言われるワケ

CSSにおけるimportantはCSSの優先度を最大に上げる非常に便利なものです。

しかし、importantは非推奨とされていると聞いたことがありますよね？

importantが非推奨とされ使われない理由、importantの代替手段として優先順位を上げる方法、importantを推奨する場面について解説します。

importantの基礎はこちら↓

importantが非推奨とされている理由

importantだらけになり最終的にCSSが効かなくなるから

「!important」があっても「!important」を使えば上書きが可能です。

しかしそれを繰り返すと「!important」だらけになります。「!important」だらけになると優先度を上げるのが困難になり最終的に優先度を上げることができずCSSが効かなくなる場面に出くわすことがあります。

「!important」は安易に使わず、「!important」を使うしかない状況でだけ使うようにしましょう。

importantの代替手段

セレクタの優先順位を上げる

「!important」を使いたいのはそのCSSの優先順位をあげたいからですよね？

「!important」を使わなくても優先順位はあがります。

CSSの優先順位はセレクタによる点数計算で決まります。

例えば同じ指定なら「後述する」「要素をもう一つ付け加える」などで優先度はあがります。

例1

#F{
padding:15px;/*こっちを優先させたい*/
}

#F{
padding:0px;/*実際はこっちが優先される*/
}

CSSセレクタが同じ、または点数が同じ場合後述されたCSSが優先されます。

解決法1.後述する

#F{
padding:0px;
}

#F{
padding:15px;/*こっちを優先させたい*/
}

解決法2.点数をあげる

body #F{
padding:15px;/*こっちを優先させたい*/
}

#F{
padding:0px;
}

「body」を付け加えたことで点数があがり、優先順位があがります。

↓CSSセレクタの優先順位と点数については詳しくこちら

importantを推奨する場面

基本的にはimportantは非推奨ですが、それでは存在価値がありません。

下記はimportantを推奨する（使ってもいい）場面です。

編集不可のCSSを上書きするとき

例えばGoogleカスタム検索のように編集できないCSSが読み込まれることがあります。または、WordPressのプラグイン、jQueryとセットで使うCSSなど直接触りたくないCSSが読み込まれることがあります。

これを同じCSSセレクタで上書きできればいいのですが、CSSの読み込み順によっては上書きができない場合があります。このようなときは「!important」で上書きしてもいいと思います。

ただ、実際は「body」などを先頭につけ、セレクタの点数を上げるだけでも優先度を上げることができます。

「!important」を上書きするとき

「!important」の要素を上書きするにはそのセレクタより優先度を上げつつ「!important」を再度利用するしかありません。

これが「!important」を使うと「!important」だらけになる理由です。

ただし、先述の「編集不可のCSS」で「!important」が使われていると「!important」で上書きするしかありません。

絶対に1箇所でしか使わない要素

「!important」が非推奨であるのは、あとから上書きができないからです。逆に言うとあとから上書きしないなら使ってもいいわけです。

絶対に上書きしない、1箇所でしか使わないような要素なら「!important」を使ってしまっても迷惑はかけないでしょう。

絶対に最優先させる要素

特定の条件化で最優先にさせたい要素の場合「!important」を使うと便利です。

例えばスマホ版になったとき隠したい要素があるとき、class="sp"を指定しこれをdisplay:noneにしたとしましょう。

<style>
#exsample a{
    display: block;
    width: 300px;
    background: #f2f2f2;
    border: 1px solid #999;
    padding: 10px;
    text-align: center;
    color: #333;
    text-decoration: none;
}
@media(max-width:750px){
    .sp{
        display:none
    }
}

</style>
<div id="exsample"><a href="#" class="sp">ボタン</a></div>

「#exsample a」と「.sp」では「#exsample a」のほうが優先度は高いです。

しかし、スマホになったとき要素を消したい。「#exsample a」には「display: block」が指定されているため「.sp{display:none}」では消すことができません。

このようなときは「!important」をつけてしまいましょう。

@media(max-width:750px){
    .sp{
        display:none !important
    }
}

これで「display:none」が最優先になり消すことができます。

まとめ

importantが非推奨とされる理由

• importantだらけになり最終的にCSSが効かなくなるから

importantの代替手段

• セレクタの優先順位を上げる

importantを推奨する場面

• 編集不可のCSSを上書きするとき
• 「!important」を上書きするとき
• 絶対に1箇所でしか使わない要素
• 絶対に最優先させる要素

以上、CSS importantが非推奨の理由、代替手段やimportantを推奨する場面についてでした。