!importantについて～なぜだめなのか～

keitaです。以前、i!mportantについて解説してきましたが、

なぜだめなのかについて説明いきたいと思います。

初心者に誤ったことを教えてはいけない。
ならなんで!importantは使ってはいけないんだよ！
CSSの読まれる順
もっと進展して
1. 禁断のimportant
  1. あれ？白じゃないの？
CSSの原則を守ればimportantは必要ない
参考になるサイト

初心者に誤ったことを教えてはいけない。

ある方のTweetで「スクールで何かあったら!importantを使えばいいというのを聞いた」みたいな書き込みがありました。以前に私の記事にも書いたように普通にCSSを書いている段階では!importantを書いてはいけない的なことを書きましたが、それを多用させることを誘発させている人がいるのは残念に思います。

ならなんで!importantは使ってはいけないんだよ！

こう思った方もいるはずです。以前の記事でちょっと端折って書いたのは反省していますし、CSSの原則も詳細に書かずにいたことについてはまずかったかなあと思います。

CSSの読まれる順から説明していきます。

CSSの読まれる順

CSSの読まれる順は

上から下へ読み込まれますというのは以前説明したとはと思いますが、

その他にこの原則があります。

!important
インラインスタイル
idセレクタ
class セレクタ

この順番で読み込まれます。

インラインスタイルとは？

<div style="color:red">
あああ
</div>

あああ

HTMLに直接CSSを書く方法の事を言います。直接はあまり使用しません。

実際に書いてみる

これはあくまで検証なのでこの書き方は正しくはないことをご承知ください。

その1

例えばこのHTMLがあり

<div id="green" class="red blue">
あああああ
</div>

このCSSがあるとします。

.red{
color:red;
}

#green{
color:green;
}

.blue{
color:blue;
}

See the Pen ex01 by Saito Keita (@saito-keita) on CodePen.

上から下に読まれるのになんで緑色？

このCSSの場合、idセレクタが一番優先されるので、上記の3と4しかないので3のidが優先されます。

その２

<div id="green" class="red blue">
あああああ
</div>

HTMLはさっきと同じ。

.red{
color:red;
}

#green.blue{
color:blue;
}

#green{
color:green;
}

See the Pen ex02 by Saito Keita (@saito-keita) on CodePen.

後に書かれているのになんで、青が優先？

CSSのセレクタにクラスが含まれると、id.classのように指定をすると、そのクラスが優先されます。

ちょっと複雑にしてみましょう

文字に段落を付けてみます。pタグを使います。

<div id="green" class="red blue">
    <p>
    あああああ
    </p>
</div>

p{
color:yellow;
}
.red{
color:red;
}

#green.blue{
color:blue;
}

#green{
color:green;
}

See the Pen ex03 by Saito Keita (@saito-keita) on CodePen.

今度は一番最初のpタグの黄色が適用されましたね。

なんで黄色？

これは、タイプセレクタといい、<div>や、<p>を直接CSSを当てるやり方です。

青にしたい場合どうすればいいの？

こう書きます。

p{
color:yellow;
}
.red{
color:red;
}
//修正
#green.blue p{
color:blue;
}

#green{
color:green;
}

See the Pen ex4 by Saito Keita (@saito-keita) on CodePen.

青になりましたね。なぜこうなったかというと、#green.blue の子要素のpを青にしなさいよ。
という指定を入れたからです。こうした指定をした場合、直のタイプセレクタよりid,classを指定し、その子要素のタイプセレクタのCSSが優先されます。これを詳細度といい、
pより、#green.blue pの方が詳細度が高いので、そちらが優先されるわけです。

もっと進展して

HTMLがぐちゃくちゃになってしまったので、リセットして別の問題を出したいと思います。

以下のHTMLとCSSを書きます。

<div id="sample-ex" class="back-red">
   <div class="back-blue">
      <p>
       黄色！
      </p>
   </div>
</div>

#sample-ex.back-red{
  width:300px;
 margin:0 auto;
 padding:20px;
 background:red;
 color:blue;
}

.back-blue{
  background:blue;
  color:white;
  padding:20px;
}

.back-blue p{
  color:yellow;
}

See the Pen ex05 by Saito Keita (@saito-keita) on CodePen.

子要素に指定ある .back-blue pがあるため、黄色が優先されます。

禁断のimportant

次にこんなちょっとカオスなコードを入れていきます。

#sample-ex.back-red{
  width:300px;
 margin:0 auto;
 padding:20px;
 background:red;
 color:blue;
}

.back-blue{
  background:blue;
  color:white !important;//ここに入れる
  padding:20px;
}

//ここを追加
#sample-ex.back-red p{
  color:black;
}

.back-blue p{
  color:yellow;
}

See the Pen ex08 by Saito Keita (@saito-keita) on CodePen.