CSSの!importantを使わずに優先順位を上げる方法

CSSの!importantはCSSの優先順位を最大にしてくれる大変便利なものでメリットもありますが、便利が故にデメリットもありコーディング規約の中で非推奨としているところもあります。

では、なぜ!importantは非推奨とされているのでしょうか？

!important非推奨の理由

!importantはCSSの優先順位のルールを一切無視して強制的にCSSのスタイルを適用させることが出来ます。

一度!importantを使用してしまうと、!importantを適用したスタイルを上書きするためには再度!importantを使うしか手段がなくってしまいます。

!importantを多用すると現在どのスタイルが適用させているか分からなくなり、最終的にCSSのスタイルを適用させることができなくなってしまう事態に陥ってしまいます。

そのため、保守性を意識したコーディングをする際には!importantを使うことはなるべき避けるべきです。

!importantを使わずに優先順位を上げる

CSSのスタイルが思うように適用されない時に!importantを使いたくなるのを我慢して、別の方法で適用したいCSSのスタイルの優先順位を上げるようにしましょう。

!importantは使わずに優先順位を上げる方法を紹介しましょう。

記述する順番による優先順位

まずは記述する順番による優先順位です。

先に記述したスタイルより後に記述したスタイルの方が適用されます。

divタグを用意して、この要素に対して背景色をスタイルします。

<div id="box" class="box"></div>

div {
  background-color: red;
}

div {
  background-color: blue;
}

divタグに対してbackgroundプロパティにredを指定したものとblueを指定したものを記述します。

この場合、後に記述されているblueが適用されて、背景色は青色になります。

記述場所による優先順位

CSSを記述する場所は３つあります。

下の記述場所ほど優先順位が高くなります。

div {
  background-color: red;
}

<style>
  div {
    background-color: blue;
  }
</style>

<div style="background: green;" id="box" class="box"></div>

この場合、HTMLタグに直接記述したbackground: green;が適用されて、背景色は緑色になります。

セレクタによる優先順位

CSSスタイルを指定するときにそのセレクタによっても優先順位が異なります。

要素セレクタ＜classセレクタ＜idセレクタ

よって、idセレクタでCSSをスタイルした方が優先順位が最も高くなります。

#box {
  background-color: red;
}

.box {
  background-color: blue;
}

div {
  background-color: green;
}

この場合、最後に記述したgreenではなく、id属性の#boxで指定したredが適用されて、背景色は赤色になります。

親要素を使った優先順位

該当の要素単体で指定した時よりも親要素と一緒に指定した方が優先順位が高くなります。

これはネストが深ければ深いほど優先順位が高くなります。

しかし、これはやりすぎると可動性が悪くなるので、気を付けましょう。

<div class="parent">
  <div id="box" class="box"></div>
</div>

.parent .box {
  background-color: red;
}

.box {
  background-color: blue;
}

この場合、.boxセレクタ単体で指定した時よりも.parent .boxセレクタで親要素と一緒に指定したときのredの方が適用されます。

まとめ

!importantを使わずに優先順位を上げる方法を紹介してきました。

!importantを使わずとも上記で紹介した方法を駆使すれば、優先順位を上げることが出来ます。

より品質の高いコーディングを行うためにもぜひ覚えておいてくださいね。