【CSS】!importantの使い方に要注意!

importantの特性

例えば、以下のようにimportantを使用したとします。

.important {
	width:100px!important;
	width:200px;
}

そうすると、後でwidthを書き換えようとしても普通に書くとimportantの値が適応され、widthが100pxとなります。
これを書き換える場合、さらに!importantで書き換える必要が出てきます。

cssは上から下にかけて読み、下に書いた内容が適応されるという特性が関係なくなり、レスポンシブ等でスタイルを変えたい時には何回もimportantを書かなければ変更できないようになってしまいます。

どうしてもCSSがHTMLのインラインスタイルで書かれている場合等、書かなければいけない場面もありますが、それ以外は極力避けた方がいいでしょう。