What are the implications of using "!important" in CSS?

Question

Hi, I've been working on a premade packaged shopping cart website for a few months, and a lot of times when I've been trying to edit something, I have to use something like for example

div.myDiv
{ 
width: 400px !important;
}

To make it display as expected. Is this bad practice? Or is the !important command perfectly legal? Can this cause anything undesired further down the line?

Thanks :)

Answer 1

!important forces the statement to always apply, doing these things:

• even if the selector is less specific and lower level, it now beats higher specificity selectors
• if there are further occurrences of that statement that would normally override that one, it does not override the important statement any more

Most of the time, !important can be avoided because specificity of selectors handles which one takes effect, which is the idea of cascading styles. However, there are some situations (can't quite remember the exact one) where the specificity isn't that logical and I have to force !important on the statement.

Reasons not to use/avoid !important?

• prevents users from using custom stylesheets (which now can't override the rules that are marked as important) which breaks accessibility for some people
• makes code more difficult to read because the mind normally takes specificity quite easily, but remembering what is !important makes it harder to read
• lacks full IE support before version 7 (I don't care about IE, but you may)

Answer 2

If other classes at the level of given has the other widths, this element will have the width specified with !important selector.

Answer 3

I wouldn't advice you to use it unless it's a necessasity, which sometimes might be the case with you, as you're working on an existing project. But try to stay away from it and use as little !important as possible.

The problem is if you use too many of them then one might inadvertantly overwrite the other. Your code is also much less legible and anyone who comes after you to maintain this will tear his/her hair apart, as trying to find !important everytime you do something in the css is a royal pain.

Check this: http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

Answer 4

Yes, !important is bad practice. !important was initally designed to help people with visual impairments overwrite the stylesheets of websites. Accessibility software/plugins use !important to overwrite the default rules in a website's css.

Using !important in your css can sometimes be useful to force a rule, but it has some implications:

1. Your stylesheet isn't cascading anymore. Where you can usually rely in the fact that further down rules overwrite the rules that are higher up in the stylesheet, with !important you can never be sure. This means you have remember which rules you assigned as !important or have to search for them everytime you edit your css

2. Users that use accessibility software may experience problems seeing your website.

Solutions:

1. Make better use of CSS' cascading properties

2. Use more specific rules. By indicating one or more elements before the element you're selecting the rule is more specific and gets higher priority:

   <div id="test">
     <span>Text</span>
   </div>
   
   
   div#test span { color: green }
   span { color: red }
   div span { color: blue }
   

No matter what the order, the text will be green because that rule is most specific. (Also, the rule for blue overwrites the rule for red, no matter the order of the rules)

Answer 5

For me, using "!important" is a bad CSS practice. I disrupts the natural flow in applying the css rules where in properties are applied from top to bottom. With important, the property will now give priority to the latest important value.

It's just like using the goto keyword in scripts. Though its are perfectly legal, it's still best avoided.