Is it bad to use !important in a CSS property?

Solution 1:

!important is a useful tool, but the drawback is that it's kind of a tool of last resort. So you don't want to over-use it as you'll end up causing headaches down the road for anyone that's maintaining the site.

However, your example is a typical use. What is happening is that the JS is injecting inline style attributes on the fly. As such, that's over-riding the cascade in your CSS. !important allows you to over-ride that.

Solution 2:

!important is valid CSS syntax and there is nothing wrong with using it—provided you understand what it is doing and why it is solving your problem, so that you use it in the right way.

CSS stands for Cascading Style Sheets. You can load multiple styles that layer on top of each other for the same selectors, both with a single CSS file and across multiple CSS files. The later rules within a CSS file take precedence over earlier ones, and rules in a later CSS file take precedence over rules in earlier files. That's the cascade.

You can think of !important as moving a particular rule into a special layer that sits above the others—still is subject to the cascade, but it will only be overridden by subsequent rules that are also marked !important. This enables you to place rules that you want to take precedence earlier in the cascade where this is logical. The most obvious example is to ensure that a rule in a hard-coded stylesheet still will take precedence over a rule that is dynamically-inserted by javascript at load-time... and that's exactly what you're doing here. Appropriate use.

There may, of course, be another way to solve your problem—such as using a more specific selector to target the attribute. There are cases however where changing the selectors available to you are not sufficiently specific to enable this, and where changing the html being generated to add additional selectors may be excessive (e.g. it is markup being dynamically generated by a content management system that does not allow easy customization of that part of the html). In such cases, using !important may be a much more expedient, pragmatic, and in that case be much easier to maintain than the alternative.

Solution 3:

In my opinion, it is DEFINITELY bad practice.

Maintaining a site that has !important scattered throughout is a nightmare. If you feel like you need to use !important, what that says to me is that you need to brush up on your CSS specificity.

They're called Cascading for a reason :)

Solution 4:

Use !important for development to quickly identify a problem in the cascade, but then fix the problem. It's best to use the least amount of specificity in CSS rules to get something to work. By all means, remove !imporant rule problems before going to production.