!importantは悪者か

一昔前、HTML4.01+CSS1か2かといったオールディーズな頃は、CSSを書くに当たっては基本的に!importantは使わないようにしましょうというのがよく言われていたように思う。強制的にオーバーライドしてしまう!importantを乱発するとメンテナンス性が下がるよ、ちゃんと詳細度を理解して詳細度計算しながら書けば!importantなんていらないよ、的な。

当時から、確かに乱発はよくないよなーと思いつつも、どうも腑に落ちないと感じていた。

セレクタ指定は何のため

思想はともかく実情として、セレクタ指定というのはあくまで人間が見てどの要素に対してプロパティを記述しているかをわかりやすくするためのものであって、詳細度を計算することを主眼に使われている物ではない。逆に、詳細度を主眼にして書くと無駄にセレクタが増え、CSSの記述はどんどんわかりにくくなり、当然、メンテナンス性も低下してゆく。

これはLESSやSassのようなCSSメタ言語の登場で特に表面化しており、これらメタ言語の主要機能である入れ子記述はあくまで見た目のエレガントさと記述性を目的としたものであるように思う。入れ子書式を使用すると各プロパティに対応する全てのセレクタを一見して把握する事ができなくなるため、詳細度計算は以前より困難になる。

!importantのメンテナンス性

一方で!importantのデバッグがそんなに大変かというと、イマドーキのモダーンなブラーウザには超有能なディベロッパーズツールが付いているので、ちょこんとクリックしてやれば「ここのスタイルは!important付きのコレが優先で適用されてまっせご主人」などと親切に教えてくれる。元凶を見つけるのも修正するのも、さほど時間が掛かるものではない。

もちろん、あまりに多用すると!important同士の衝突が起きて多少面倒な事態になる事もあるなど、混乱の元ではある。またそもそも、多用せざるを得ない状況になるならば、HTML側のマークアップが適切でなかったりする可能性が高い。なによりも、予期しない挙動を手軽に回避するために安易な!importantを乱発するのは全くよろしくない。

しかし、絶対使っちゃいけないんだよ！おかーさんがいってた！というほどの物かというと、違うように思う。全く使わないようにするために全体のセレクタ指定をややこしく書き直すようなことになるならば、さっさと!importantで済ませた方がエレガントな事もあるはずだ。