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

Question

I don't know much about CSS (I'm purely a Java/J2EE developer), but I somehow got stuck with a CSS puzzle which I am unable to solve.
I was using a form with a jQuery light box effect which has a div with an id and a class:
<div id="contact-container"
class="myclass"
style="z-index: 1002; height: 386px; width: 450px; position: fixed; left: 406.5px; top: 15%; ">
In my CSS file, I'm using the following entry:
#contact-container {
font: 16px/22px 'Trebuchet MS', Verdana, Arial;
text-align:left;
width:450px;
}
But when this form was displayed as jQuery pop-up, it was getting displayed properly in Mozilla, but on Google Chrome and IE the box was not coming properly: only part of it was being displayed, and was hidden with a scroll bar.
When I saw it through firebug (my first time using it :)), it's showing me something like:
<div id="contact-container"
class="myclass"
style="position: fixed; z-index: 1002; height: 67px; width: 450px; left: 406.5px; top: 15%;">
and for the same settings, it was not coming properly for IE and Mozilla. After lots of Googling, I made the following changes to my CSS:
#contact-container {
font: 16px/22px 'Trebuchet MS', Verdana, Arial;
text-align:left;
width:450px;
height:380px !important;
}
I fixed the height using height:380px !important;, but not knowing much about CSS, I am not sure if this was the right approach, as I searched about height but it was not defined anywhere.
Please suggest if I have adopted a wrong approach.

Answer 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.

Answer 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.

Answer 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 :)

Answer 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.

Answer 5

If you use !important, it has the highest priority on the element. But take care, if you use twice for a same function (like background-color, or color) on the same element , then the last one will be the highest. Be aware to using twice the !important (means don't do this):
<div id="contact-container" class="myclass" style="z-index: 1002; height: 386px; width: 450px; position: fixed; left: 406.5px; top: 15%; ">
#contact-container {width:450px !important;}
.myclass {width:500px !important;}
In this case, your solution is perfect and absolutely enough.