LoginSignup
0
1

More than 3 years have passed since last update.

打倒、!important。こいつを上回るカスケード順序

Last updated at Posted at 2019-06-13

すごいCSSがすごかった(語彙)・・・

 長年継ぎ足しされてきて巨大戦艦みたいになってるCSS。新たなデザインが加わったところで、ちゃんと表示されなくなる部分が出てきていたので、それの修正作業をした時の話です。
応急処置感が半端じゃないので、もっと綺麗に書き直すのにいい方法を見つけたいところです・・・

!importantが乱用されている

強制的に新しいデザイン部分を入れ込むのにそこかしこに!importantで読ませている。これのせいで影響を与えてはならないところまで影響が出たので、なんとか新たに加えられたCSSには影響を与えることなく、影響を与えられてしまったところだけをなんとかするにはどうしたらいいか?

解決策

セレクタを詳細に書き込むことで、!importantを超えるカスケード順序にすることができる。
ということで、セレクタを詳細にして、優先順位をあげることができる仕組みをCSSの固有性と呼ぶそうです。

ex.csss
ul {background:#dd6300!important;}

#hoge .fuga li ul {background:#f0f8ff;}

上記のようにしてあげると、下の方が優先されて読まれる。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1