【CSS】!importantを使わないための色々

!importantはcssの後ろに設置すると、そのcssの優先順位を一番上にしてしまう特効薬のような役目をします。これを使うのは便利な半面、cssのルールを壊してしまうのでその後のケアが大変になってしまいます。

はっきり言うと、優先順位をぶっ壊す!importantは使用するべきではないです。!importantは大昔のCSS等のとんでもない奴を何とかする用途で使わざる得ない事はありますが、そのCSSを自分だけしか使わないとしても、絶対に後々苦労します。そりゃもう絶対に。

!importantを使わないCSSを書く時に気をつけること

HTMLタグに直接指定しない

a {
  color:red;
}

こんな感じで、aタグを指定します。
その後、別な場所でaタグをボタンっぽく整形したい場合

.button {
  background:black;
  color:white;
  display:block;
  margin:0 auto;
  padding:1rem;
  width:50%;  
}

このclassをaタグに適用すると、ボタンの文字が赤になります。
そうですね。直下のaにcssを指定したので、そのcssが継承されているのです。こりゃまずい。
こうならないためには、必要なところだけにcssが適用されるような書き方をするしか無いです。
この部分はHTMLとCSSに慣れてきて、構造が理解できるようになるとaやpやdlやul等に直接指定しても大丈夫な使い方が見えてくるので、それまではタグに直接cssを書かずにまずclassを設定してからそこにcssを書くようにします。

いざとなったらidも使う

個人的にはidはjavascript等の制御用に使うようにしているので、あまりidにcssを指定することはないのですが、昔のHTMLを修正する際に、先程の直下のタグに指定したcssが邪魔になるなんて事があります。

この場合、idを使って指定部分だけ上書きしてしまう方法を取ることも可能です。

a {
  color:red;
}
#hoge a {
  color:black;
}

<div id="hoge">等のタグで変更したい場所を囲んでしまえば、その囲んだ中のaタグの文字は黒色になります。

cssの書き方は結構自由なので、人によって、また時期や時代によって色々な書き方が存在します。今ならsass等で書くことも多くなりました。
cssの要素が下の要素に継承していくと言うルールを踏まえ、数年後に見ても分かるような美しいcssを頑張って書いていきたいものです。