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

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`: ```

``` 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: ```

…

Accepted Answer

`!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.

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

Solution

Problem