What are the implications of using “!important” in CSS? [duplicate]

Answer 1

For me, using !important is a bad CSS practice. It 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.

Answer 2

A little late to this question but it's saying "no matter what other styles are applied, ignore them and use this one". You may find it a little confusing with the ! infront (of the !important) because thats a not operator in javascript but in css it's called a delimiter token that just says to take priority. Heres an example.

---

Without !important:

.set-color{
  color: blue;
 }

.set-color{
  color: red;
 }

outputs RED

---

!important on bottom attribute (of same)

.set-color{
  color: blue;
 }

.set-color{
  color: red !important;
 }

outputs RED (would have been red anyways)

---

!important on top attribute (of same)

.set-color{
  color: blue !important;
 }

.set-color{
  color: red;
 }

outputs BLUE (says ignore red, use blue)

---

Answer 3

Well, i think using !important is sometime "must to do job" if you want overdraw wp-plugins default properties.

I used it just today and it was the only way to finish my job. Maybe is not good way to do something but sometime is the only way to do it.

Answer 4

I wouldn't advise you to use it unless it's a necessity, 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 inadvertently 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 every time you do something in the CSS is a royal pain.

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

Answer 5

I think it is important that we touch on this again, here at the end of 2014 when more rules are being added into the working draft, it is so important not to impose restrictions upon your users. I have wrtten this small example to explain a possible scenario in which such a thing takes place. This is taken from a REAL website I have visited on the web, and I see it, sadly, more often than not.

Form Text Editor Fields

You have a website, and your website depends on filling out forms and editing text. To try to minimize eye strain you try to go with a style you think everyone will be okay with, and since your users mainly visit at night, you decide to make your background color to be white, and then make the text color to be black. The form is blank by default, so you type in text (this time) to make sure it works:

...
background-color: black; /* I forgot important here, but it works fine on its own */
color: white !important;
...

A few months later, users complain that white-on-black is too eye straining but the other half love it, what do you do? you add a custom theme that uses !important to override the internal styles so that BOTH parties are happy, which is what it is SUPPOSED to be used for:

...
background-color: white !important;   
color: black !important;
...

Now, what happens here? What did you expect. If you properly remember the !important tags in the first set, you would have noticed it didn't work and probably remembered that you needed to delete the !important tags off. BUT you forgot one..

RIGHT, you get white text on white background, and the user can no longer read your webpage at all if they try to use this new style (assuming you kept it).

Of course, You don't realize this because the textbox is empty. And You ASSUME that it will work! (Assumption is a developer's worst enemy, it's right up there with pride and arrogance).

Make and Follow Self Implied Rules

So, the basic rule should be only use !important when designing OVERRIDES to an original complete set of css rules. Remember that it is meant for exceptions and disturbs the natural order and meaning of css in the first place. In MOST cases you will not need to use it at all.

Know How Users Customize Their Colors

With the existence of such tools as extensions and the presence of sites like 'userstyles.org' and it's stylish counterpart, you run the risk of alienating your users by using the !important tag at all! Keep in mind that stylish will not override them.

Never Restrict Your Visitors

If you use !important on a style, make sure you make it possible for the user to turn that style off (and i dont mean via the web browser's internal 'on/off' switch). And for heavens sake don't make it DEFAULT.

Ads

People are less and less using stylish for ad removal, so I don't think protecting ads with !important really is an issue here. It will just annoy someone trying to customize your site.

Answer 6

!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