すごいCSSがすごかった(語彙)・・・
長年継ぎ足しされてきて巨大戦艦みたいになってるCSS。新たなデザインが加わったところで、ちゃんと表示されなくなる部分が出てきていたので、それの修正作業をした時の話です。
応急処置感が半端じゃないので、もっと綺麗に書き直すのにいい方法を見つけたいところです・・・
!importantが乱用されている
強制的に新しいデザイン部分を入れ込むのにそこかしこに!importantで読ませている。これのせいで影響を与えてはならないところまで影響が出たので、なんとか新たに加えられたCSSには影響を与えることなく、影響を与えられてしまったところだけをなんとかするにはどうしたらいいか?
解決策
セレクタを詳細に書き込むことで、!importantを超えるカスケード順序にすることができる。
ということで、セレクタを詳細にして、優先順位をあげることができる仕組みをCSSの固有性と呼ぶそうです。
ex.csss
ul {background:#dd6300!important;}
#hoge .fuga li ul {background:#f0f8ff;}
上記のようにしてあげると、下の方が優先されて読まれる。