!important CSS Declarations: How and When to Use Them

Advertisement

When the CSS1 specification1 was drafted in the mid to late 90s, it introduced !important declarations that would help developers and users easily override normal specificity when making changes to their stylesheets. For the most part, !important declarations have remained the same, with only one change in CSS2.1 and nothing new added or altered in the CSS3 spec in connection with this unique declaration.

Adding !important in Developer Tools

Let’s take a look at what exactly these kinds of declarations are all about, and when, if ever, you should use them.

A Brief Primer on the Cascade

Before we get into !important declarations and exactly how they work, let’s give this discussion a bit of context. In the past, Smashing Magazine has covered CSS specificity2 in-depth, so please take a look at that article if you want a detailed discussion on the CSS cascade and how specificity ties in.

Below is a basic outline of how any given CSS-styled document will decide how much weight to give to different styles it encounters. This is a general summary of the cascade3 as discussed in the spec:

  • Find all declarations that apply to the element and property
  • Apply the styling to the element based on importance and origin using the following order, with the first item in the list having the least weight:
    • Declarations from the user agent
    • Declarations from the user
    • Declarations from the author
    • Declarations from the author with !important added
    • Declarations from the user with !important added
  • Apply styling based on specificity, with the more specific selector “winning” over more general ones
  • Apply styling based on the order in which they appear in the stylesheet (i.e., in the event of a tie, last one “wins”)

With that basic outline, you can probably already see how !important declarations weigh in, and what role they play in the cascade. Let’s look at !important in more detail.

Syntax and Description

An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has. It should be noted here that the phrase “!important declaration” is a reference to an entire CSS declaration, including property and value, with !important added (thanks to Brad Czerniak4 for pointing out this discrepancy). Here is a simple code example that clearly illustrates how !important affects the natural way that styles are applied:

#example {
	font-size: 14px !important;	
}

#container #example {
	font-size: 10px;
}

In the above code sample, the element with the id of “example” will have text sized at 14px, due to the addition of !important.

Without the use of !important, there are two reasons why the second declaration block should naturally have more weight than the first: The second block is later in the stylesheet (i.e. it’s listed second). Also, the second block has more specificity (#container followed by #example instead of just #example). But with the inclusion of !important, the first font-size rule now has more weight.

Some things to note about !important declarations:

  • When !important was first introduced in CSS15, an author rule with an !important declaration held more weight than a user rule with an !important declaration; to improve accessibility, this was reversed in CSS26
  • If !important is used on a shorthand property, this adds “importance” to all the sub-properties that the shorthand property represents
  • The !important keyword (or statement) must be placed at the end of the line, immediately before the semicolon, otherwise it will have no effect (although a space before the semicolon won’t break it)
  • If for some particular reason you have to write the same property twice in the same declaration block, then add !important to the end of the first one, the first one will have more weight in every browser except IE6 (this works as an IE6-only hack, but doesn’t invalidate your CSS)
  • In IE6 and IE7, if you use a different word in place of !important (like !hotdog), the CSS rule will still be given extra weight, while other browsers will ignore it

When Should !important Be Used?

As with any technique, there are pros and cons depending on the circumstances. So when should it be used, if ever? Here’s my subjective overview of potential valid uses.

Never

!important declarations should not be used unless they are absolutely necessary after all other avenues have been exhausted. If you use !important out of laziness, to avoid proper debugging, or to rush a project to completion, then you’re abusing it, and you (or those that inherit your projects) will suffer the consequences.

If you include it even sparingly in your stylesheets, you will soon find that certain parts of your stylesheet will be harder to maintain. As discussed above, CSS property importance happens naturally through the cascade and specificity. When you use !important, you’re disrupting the natural flow of your rules, giving more weight to rules that are undeserving of such weight.

If you never use !important, then that’s a sign that you understand CSS and give proper forethought to your code before writing it.

That being said, the old adage “never say never” would certainly apply here. So below are some legitimate uses for !important.

To Aid or Test Accessibility

As mentioned, user stylesheets can include !important declarations, allowing users with special needs to give weight to specific CSS rules that will aid their ability to read and access content.

A special needs user can add !important to typographic properties like font-size to make text larger, or to color-related rules in order to increase the contrast of web pages.

In the screen grab below, Smashing Magazine’s home page is shown with a user-defined stylesheet overriding the normal text size, which can be done using Firefox’s Developer Toolbar:

User Style Sheet Added to Smashing Magazine

In this case, the text size was adjustable without using !important, because a user-defined stylesheet will override an author stylesheet regardless of specificity. If, however, the text size for body copy was set in the author stylesheet using an !important declaration, the user stylesheet could not override the text-size setting, even with a more specific selector. The inclusion of !important resolves this problem and keeps the adjustability of text size within the user’s power, even if the author has abused !important.

To Temporarily Fix an Urgent Problem

There will be times when something bugs out in your CSS on a live client site, and you need to apply a fix very quickly. In most cases, you should be able to use Firebug or another developer tool to track down the CSS code that needs to be fixed. But if the problem is occurring on IE6 or another browser that doesn’t have access to debugging tools, you may need to do a quick fix using !important.

After you move the temporary fix to production (thus making the client happy), you can work on fixing the issue locally using a more maintainable method that doesn’t muck up the cascade. When you’ve figured out a better solution, you can add it to the project and remove !important — and the client will be none the wiser.

To Override Styles Within Firebug or Another Developer Tool

Inspecting an element in Firebug or Chrome’s developer tools allows you to edit styles on the fly, to test things out, debug, and so on — without affecting the real stylesheet. Take a look at the screen grab below, showing some of Smashing Magazine’s styles in Chrome’s developer tools:

Overriding Styles in Chrome's Developer Tools

The highlighted background style rule has a line through it, indicating that this rule has been overridden by a later rule. In order to reapply this rule, you could find the later rule and disable it. You could alternatively edit the selector to make it more specific, but this would give the entire declaration block more specificity, which might not be desired.

!important could be added to a single line to give weight back to the overridden rule, thus allowing you to test or debug a CSS issue without making major changes to your actual stylesheet until you resolve the issue.

Here’s the same style rule with !important added. You’ll notice the line-through is now gone, because this rule now has more weight than the rule that was previously overriding it:

Adding !important in Developer Tools

To Override Inline Styles in User-Generated Content

One frustrating aspect of CSS development is when user-generated content includes inline styles, as would occur with some WYSIWYG editors in CMSs. In the CSS cascade, inline styles will override regular styles, so any undesirable element styling that occurs through generated content will be difficult, if not impossible, to change using customary CSS rules. You can circumvent this problem using an !important declaration, because a CSS rule with !important in an author stylesheet will override inline CSS.

For Print Stylesheets

Although this wouldn’t be necessary in all cases, and might be discouraged in some cases for the same reasons mentioned earlier, you could add !important declarations to your print-only stylesheets to help override specific styles without having to repeat selector specificity.

For Uniquely-Designed Blog Posts

If you’ve dabbled in uniquely-designed blog posts7 (many designers take issue8 with using “art direction” for this technique, and rightly so), as showcased on Heart Directed9, you’ll know that such an undertaking requires each separately-designed article to have its own stylesheet, or else you need to use inline styles. You can give an individual page its own styles using the code presented in this post10 on the Digging Into WordPress blog.

The use of !important could come in handy in such an instance, allowing you to easily override the default styles in order to create a unique experience for a single blog post or page on your site, without having to worry about natural CSS specificity.

Conclusion

!important declarations are best reserved for special needs and users who want to make web content more accessible by easily overriding default user agent or author stylesheets. So you should do your best to give your CSS proper forethought and avoid using !important wherever possible. Even in many of the uses described above, the inclusion of !important is not always necessary.

Nonetheless, !important is valid CSS. You might inherit a project wherein the previous developers used it, or you might have to patch something up quickly — so it could come in handy. It’s certainly beneficial to understand it better and be prepared to use it should the need arise.

Do you ever use !important in your stylesheets? When do you do so? Are there any other circumstances you can think of that would require its use?

Further Resources

Footnotes

  1. 1 http://www.w3.org/TR/REC-CSS1-961217
  2. 2 http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
  3. 3 http://www.w3.org/TR/CSS21/cascade.html#cascade
  4. 4 http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/#comment-491663
  5. 5 http://www.w3.org/TR/REC-CSS1-961217#important
  6. 6 http://www.w3.org/TR/CSS2/cascade.html#important-rules
  7. 7 http://www.smashingmagazine.com/the-death-of-the-blog-post/
  8. 8 http://www.alistapart.com/articles/art-direction-and-design/
  9. 9 http://heartdirected.com/
  10. 10 http://digwp.com/2010/02/custom-css-per-post/
  11. 11 http://www.w3.org/TR/CSS2/cascade.html#important-rules
  12. 12 http://reference.sitepoint.com/css/importantdeclarations
  13. 13 http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
  14. 14 http://www.impressivewebs.com/everything-you-need-to-know-about-the-important-css-declaration/
  15. 15 http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css/

↑ Back to topShare on Twitter

Louis Lazaris is a freelance web developer and author based in Toronto, Canada. He blogs about front-end code on Impressive Webs and curates Web Tools Weekly, a weekly newsletter for front-end developers.

Advertising
  1. 1

    Agree with Louis on this one, though could have a been a shorter article if Louis had simply said:
    DON’T. EVER.
    ;)

    11
  2. 2

    I use the !important declaration as a hack for IE6. IE6 doesn’t recognize !important. It also doesn’t work with transparent PNGs. So you can declare a transparent PNG as a background and make it important. Then you can re-declare the background as reasonable GIF replacement or nothing (if it’s an somewhat unnecessary drop shadow for example). IE6 will bypass !important and set the background to nothing. Well behaved browsers (which also support transparent PNGs) will show the PNG.

    But other than that, yeah, I’d say avoid it.

    -7
  3. 3

    This is one of the reasons I use !important sometimes, within the context of regular design:

    http://jsbin.com/erici/edit

    Another reason is generic classes that you can use in a pinch and be sure they’ll get applied, like:

    .last { margin-right: 0 !important; }

    5
  4. 4

    !important is awesome, it makes my styles work everywhere so I put it on everything. It even works in IE6.

    -3
  5. 5

    I agree for the most part that it should be used very little, bet as the article indicates, there are some situations that call for it. For example, I just did a small jQuery project for my corporate web site. I do not have control of all the CSS files and someone else had used it define all link hovers. I could not path to my link colors and change their hover color. So I added the !important to my specific link change to force my cascade to work correctly. Problem solved and I was specific enough to not impact the rest of the site.

    We tend to approach solutions from the egotistical point that we have complete control. On a very large site with thousands of pages, there are usually multiple people involved and you can’t go back and fix their code. So a rule I follow is to try not to use it if you are in control. Solve the problem correctly without the use of the hammer. If you have to use it, then be considerate and specific enough to not force other people coming after you to have to over use it to meet their design specifications as it can cause a long term cascade of its use until every style has to include it.

    1
  6. 6

    Working with WordPress plug-ins, I have to admit sometimes this is the only way you can do it, without overriding the plugins styles, which can be erased after an upgrade.
    Otherwise, I avoid at all times!

    5
  7. 7

    Thank you for that article! My gut feeling always told me to avoid this ;-)

    0
  8. 8

    Awesome. How this great idea you get ? I think – !important – ‘s behavior very from browser to browser.

    1
  9. 9

    In my experience so far, the usage of !important can always be overcome with other measures. It’s a good article for those who are not familiar with the keyword, however for the more experienced readers it’s merely an average read.

    1
  10. 10

    I disagree…..I know that I’ve been forced to use !important on stylesheets because I was skinning Microsoft SharePoint which has some very “closed” code. It will often render inline styles in its HTML, and the only way to override the style is to use this method. If there was no point in having it, it probably wouldn’t be supported by CSS3 and the browsers.

    15
  11. 11

    In my experience, you should only ever use it to override horrible, inline CSS that has been placed there normally by a rubbish ASP.NET back-end.

    8
  12. 12

    I admit I’m abit of a pain for using the !important alot.. really does vary from job to job and depending what it’s actually for.

    I suppose if you’re doing a high paid design job where you have the time to perfectly layout your CSS then it will perhaps won’t need to be used, however it’s the real world and sometimes it’s just easier.

    Especially when doing custom headers etc and when you want to force (regardless of whatever anything else says) colours, styling and font-size etc.

    To sit and say !important should never be used really is quite ignorant.

    The Irony in this post is that @LouisLazaris needs to practise what he preaches, his own website is full of !important decorations, ignorance is bliss.

    4
  13. 13

    Yep it’s definately useful for overriding inline CSS that you don’t have any control over.

    I also occasionally use it if I am using a class specifically for changing text colour. For example I’ll have .blue, and a .green, styles. I can add these to things to override any previously set colour. Makes it easy to change colours across the board at a later date too :)

    -3
  14. 14

    Nice read…. #article { agreed !important; } <== haha! Cheers!

    1
  15. 15

    I think you missed a colon, it won’t validate ;)

    0
  16. 16

    “In my experience, you should only ever use it to override horrible, inline CSS that has been placed there normally by a rubbish ASP.NET back-end.”

    That’s exactly why I use it as well. -_-;;

    0
  17. 17

    On my companies project, we have a global CSS file where I overwrite a lot of the CSS that was written in the base software. To overwrite everything, I could of used a crapton of !important; calls, but i instead just used specificity (adding parent container calls before the actual element calls) to do so. Might be more or less code, but It works better and cleaner this way.

    0
  18. 18

    !important is not a declaration. A declaration is a property:value; pair. !important modifies the value of one property. I don’t know the precise term used to describe this type of modifier, but it would be confusing for a component of a declaration to also be called a declaration.

    I can see from the CSS1 spec how this misconception must have occured, though. “A reader rule with an important declaration will override an author rule with a normal declaration. An author rule with an important declaration will override a reader rule with an important declaration.” isn’t exactly the clearest language ever. I think they meant “A reader rule with a declaration containing !important will override an author rule with a normal declaration. An author rule with a declaration containing !important will override a reader rule with a declaration containing !important.”

    As such, the use of the definite article, as in “The !important CSS Declaration” is improper and confusing. Otherwise it was a fantastic article!

    5
  19. 19

    In my mind it’s the equivalent of the goto keyword that exists in some programming languages. Never to use it. If I want to override an inlined style I clear that style using javascript.

    -4
  20. 20

    I was recently overridden on a project by the xbrowser team. Here is an excerpt of the css they added (find the def that is not !important – if you can!)

    BODY.user_edit #tabs-wrapper { display: none !important; }
    BODY.user_edit .tabs.secondary { display: none !important; }
    BODY.user_edit #user-profile-form { margin: 50px 60px 60px 60px !important; }
    BODY.user_edit { padding: 0 80px !important; }
    BODY.user_edit FIELDSET A { padding-left: 0px !important; }
    
    BODY.user_register #container { margin-top: -15px !important; }
    ...
    2
  21. 21

    I had trouble getting this to work in IE7:

    .blockItem.left#fourth{
    display:block !important;position:absolute;float:left;display:inline;color:blue;font-size:12pt;font-size:14pt!important;position: relative !important;width:400px;height:250px!important;
    }

    Is important why it’s going to the left?

    -5
  22. 22

    Mike, I think a line-height should work.

    -2
  23. 23

    @Adam

    Like this?

    .blockItem.left#fourth{
    display:block !important;position:absolute;float:left;display:inline;color:blue;font-size:12pt;font-size:14pt!important;position: relative !important;width:400px;height:250px!important;line-height:1 !important;
    }

    it’s still going left.

    -1
  24. 24

    Thanks, hacks are for chumps.

    -8
  25. 25

    Soooo no one uses the !important tag on an element with min-height to get ie6 to work (min-height: 300px, height: auto !important, height: 300px) ? Of course I now use the conditional comments to check for browser which then adds a class to the body, and target IE6 that way now. But before that, that was the only time I used the !important tag. I find it hard to believe no one did/does that anymore though.

    -1
  26. 26

    This is interesting. YUI CSS uses the * CSS hack for IE6 declarations, but the CSS doesn’t validate then. This seems like a good alternative (still a hack, but slightly better). I may have to make use of the !hotdog modifier, just too good to pass up.

    -2
  27. 27

    I personally use it all the time as a IE6 hack when using png images since IE6 ignores the declaration.

    background: transparent url(images/cool_image.png) top left no-repeat !important;
    background: transparent url(images/ie_image.gif) top left no-repeat;

    Makes it easy to have the cool png image with partial transparency and also display a less cool image to IE6 users.

    1
  28. 28

    This is a problem within SharePoint and the add-ons that third party vendors pile on. While you may have to use !important because of this, for most people who have control over their markup and stylesheets, the only time to use it is never.

    4
  29. 29

    The article missed the one thing I consistently use !important for: Chrome and its damn default form styles! Google, I will tell YOU what I want my forms to look like!

    -1
  30. 30

    Great article – !important feels like a hack when its being used, but once you’ve exhausted all avenues you just have to use it – especially when branding SharePoint, Microsoft loves their inline styles!

    2
  31. 31

    Nice. Never too old to learn. I’ve seen this property a million times in tutorials on how to hack browsers into compliancy but never realized that it has a designed purpose like this.

    0
  32. 32

    Great article. I wish less people used the !important attribute=)

    2
  33. 33

    I’ll have to second the SharePoint comment, and unless you want to re-write core.css to your exact specification and then get your changes overwrote with a service pack… you’ll just stick with !important

    3
  34. 34

    @Its Adam – Good on you for checking out this guy. 13 instances of !important in two stylesheets on his Impresive Webs site, plus a 404 error for a linked stylesheet that doesn’t exist. Kinda sloppy work for someone lecturing on proper technique. There’s also one more !important on his Interviews site.

    I had forgotten about !important. I haven’t used it since the frustrating days of Myspace profile v1 with the horrible tug-of-war trying to get things to fit into that horrible code. I haven’t used !important in at least 4 years. I didn’t know anybody was still using it.

    0
  35. 35

    You’re right, he may have been referring to SM, and not Impressive Webs (my site). So I apologize to Adam for that. However, people should generally understand that most of the top design blogs post articles by outside authors. The author articles don’t necessarily reflect the coding practices of the site on which the articles are posted.

    So when he says “the author’s website”, I assume he knows what he’s referring to. In that case, he’s completely wrong, as I hardly ever use !important declarations.

    -6
  36. 36

    Mark, please read the article again. In the article I gave 6 legitimate uses of !important after the hyperbolic “never”. Commenters have mentioned more uses, many of which I agree with. The “never” section was to impress on people’s mind’s that it’s rarely the right choice.

    CORRECTION: And actually, I went back to review my own CSS and I was able to remove those references to !important by just making the lines more specific. I think I was just in a rush to fix those, and something was bugging out at the time, so I quick-fixed them to ensure the ads were displaying properly, which is obviously a priority.

    -5
  37. 37

    Ahhh, the thing that made custom Myspace code possible…by putting it on EVERY line of CSS. *lol*

    0
  38. 38

    actually, to expand on your point about Overriding Inline Content – if you think about an Inline CMS, the !important keyword can be very important. ;) Assuming you have the default styles for the CMS elements declared above the user styles, the user can unwittingly modify those default styles. Granted, the user could always write a rule with higher priority, but in most cases the !important tag can be a crucial fix for maintaining the look of your CMS elements.

    1
  39. 39

    It’s good for IFRAMES ! Where the CSS is included on other server… I try not to use the !important unless it’s veeeeeeryy important! :)

    2
  40. 40

    Great article. It really clarified things for me.

    0
  41. 41

    Um… No, my own website is not “full of !important declarations”. Please do your research before slandering an author.

    There are exactly 8 !important declarations in my main stylesheet, and 4 others in a stylesheet for smaller resolutions — and every single one of those !important declarations is applied to override styles set by the BSA ad block. I probably could have mentioned that as a possible use in the article, but to be honest, I don’t know for certain if that’s the best (or only) way to set those styles, but it just happens to be the only solution that worked on my site.

    -5
  42. 42

    Mark, the empty stylesheet declaration is for a stylesheet that gets dynamically changed based on the screen size. I don’t think there’s anything wrong with having a linked file that’s missing on a website, but it serves a purpose anyhow. It was just easier to code that way, since I pretty much coded my own solution for that stylesheet switcher.

    Also, as I mentioned in a previous comment, all the !important declarations are to override styles set by the BSA ads, so they are being used for a legitimate purpose, and not just out of laziness.

    2
  43. 43

    Yes, but the problem with that is those are not the only solutions to those problems. In both cases, you can still get the same result by just being specific enough in your CSS.

    Admittedly, your way could end up saving dozens of lines of CSS, and is much easier, but I still can’t justify its use even in those circumstances. I guess it’s acceptable for a personal blog or something, though, since it’s unlikely anyone else will use the code.

    2
  44. 44

    Mike, I’m not completely sure what you’re trying to do there, but keep in mind that if an element is floated left, it will stay as a block element, even if you tell it to be “inline” in a later line of code.

    0
  45. 45

    Brad,

    You’re absolutely right. An !important declaration is actually the entire line, including the word “!important”. I guess I didn’t pick up on that, and was probably confused by the phrase “!important declaration” used in the spec and other sources.

    I think this is a good point, and I will likely edit the article to make this more clear. Thanks!

    1
  46. 46

    Its really very very !important as this is going to solve lot of my issues that were in past. I was really finding difficult to use Requiredfieldvalidator under updatepanel due to certain reason of rendering. I think now it will be solved.

    Thanks for sharing.

    0
  47. 47

    Its even really important when Asp.Net don’t show the validator content as the property never get changed from display:none. we can manage this. Regarding Asp.Net, It really don’t care about developers’ preference and even includes inline css whether we want it or not and the way it renders the control is bullshit. You really can’t make any Tableless website.

    I think this is the reason of php’s poplarity.

    0
  48. 48

    Its Adam might be referring to this website, which by my count has 121 occurrences in the default stylesheet alone.

    2
  49. 49

    ”When Should It Be Used?”

    ”To Override Inline Styles in User-Generated Content”
    Oh, yes….YES!! You can’t imagine how many headaches WYSIWYG editors, CMS and other generated crap have given me over the years… thank God !important exists, of course, there’s a HUGE logic flaw to use !important that way, I mean, if you need to overwrite something, then maybe stop that something from happening? Yeah, in a perfect world that’s what I would do, but since it doesn’t work that way… !important it is for me! :)

    Also, I really liked Steven Schrab’s approach – using it as a IE6 hack, of course, sad that we still have to develope something for IE6…

    3
  50. 50

    Just to clarify:

    IE6 doesn’t ignore !important declarations; it ignores an !important declaration for a property that’s repeated in the same declaration block.

    IE6 treats !important exactly the same as every other browser, except for the above.

    2
  51. 51

    Thanks for the clarity!

    0
  52. 52

    I’m not sure which site Adam was referring to, however in my mind when the author says “never”, 13 qualifies as loaded. If a cop pulls you over and asks how much you’ve had to drink, “2 beers” is always the answer. “13 beers” and the cop will consider you to be “loaded”.

    Will SM be cleaning up their code and removing the horde of improper and lazy !important declarations, on the merits of this article, or ignoring the advice. And what should we – the students – take away from that if they leave them all in?

    4
  53. 53

    ^5 Al! Good to meet someone that knows and shares in my [former] pain!

    0
  54. 54

    I’m also not in favor of using it , becoz it gives a lots of problem in maintaining big application & even if you are working on someone else’s code… though it fix the problem very quickly but ultimately you are not writing good code, it should be use where it is intended for.

    0
  55. 55

    Thanks for the amazing post. However, I do have several queries.

    Can anyone tell me what is the difference among the following

    1. Declarations from the user agent
    2. Declarations from the user
    3. Declarations from the author

    Appreciate the feedback

    2
  56. 56

    .this-post-is
    {
    miss:don’t !important;
    }

    0
  57. 57

    Hi, Pankaj.

    That’s a good question, and might not be so clear to people not familiar with those terms.

    1. Declarations from the user agent are styles that are applied to elements from inside the browser (i.e. user agent). Many elements don’t have any visible default styling, so most of what comes from the user agent is invisible. For example, a paragraph element (<p>) is naturally “display: block;”. That style comes from the user agent.

    2. Declarations from the user are styles that are applied by an actual human viewing a website. If I’m not mistaken, many browsers allow anyone viewing a website to override the stylesheet using their own stylesheet. The FF developer bar allows this, and I’m assuming the other browsers’ dev tools do too. These “user styles” will obviously only be visible to the user that applies them. They’re basically local CSS rules.

    3. Author styles are those that are declared in the linked stylesheets in the actual web page. Those are the styles that are referred to 99.9% of the time in any given web design article.

    Hope that helps.

    3
  58. 58

    Thanks louis, we are having quite a debate here at the office. This what I really understood from your reply.

    If I were to use ‘!important’ in my style sheet & overwrite the styles of User agent(Browser Style sheet), which results in ‘user style sheet’ being created on the fly. I am right here, or off track?

    0
  59. 59

    Nice article !

    0
  60. 60

    Yes, the user-created style sheet (viewed locally) will override the styles of the browser or even the author. But you don’t need !important in order to do that.

    The only time you would need !important in the user (local) stylesheet is if the specificity of your own styles was not enough (for example, if the author used “#container p” but you only used “p”). You would also need to use !important if your specificity was the same (i.e. you both used “#container p”) and the author used !important. In that case, the equal specificity + !important would give more weight to the user style.

    Hope that clears it up!

    2
  61. 61

    Awesome. I can remember that i saw some use of ‘!important’ in some stylesheet in my projects that also related with some js effects.Whatever it was ,that’s not so important,from my knowledge i knew that using !important is not important.

    This article really helped me to clear out my confusions.Thanks.

    0
  62. 62

    It certainly does. Can’t thank you enough for your help.
    We also understood when to use !important, & when to avoid it.
    Cheers.

    0
  63. 63

    .blue and .green are perfect examples of non-semantic class names that should never be used.

    4
  64. 64

    What an !important article to write about! I found that many developers have been misusing the !important declaration. As a newbie in the development world I was challenged with seeding out !important tags laced throughout code of various sites. Well put!

    Thanks

    Ed Wieczorek

    0
  65. 65

    True. I also sometimes have to use it for exactly this reason.

    0
  66. 66

    If you have full control then sure, create your style sheets without !important unless you absolutely need to use it for some of the reasons stated above. However, if you’re using stuff like Sharepoint or building applications using Bing Maps, you may find that you must use !important to override various styles.

    I absolutely had to override some Bing maps stuff and some AJAX controls for modal popups, etc.

    As the saying goes, never say never. Also realize that you don’t always have complete control when using third party api’s, etc. in your web projects.

    1
  67. 67

    This is great!
    Thanks.
    Brief and clear and to the point.

    0
  68. 68

    Nothing is processed naturally in world of codes, everything has rules. It is our brain that tends to make things flow naturally. But okay, lets stick to ” natural thing for a bit ” . Why !Important would not be natural ? And #div #div is ? Aren’t those two same as !important ? They define specificity, define rules and importance. That’s the same !important does. What’s the difference in processing it ? Yeah, don’t tell me , a messy looking style ? Bah, I don’t agree. I agree that you shouldn’t overuse this property, but also I do encourage its usage. But anyway, all in all, it is a great article.

    1
  69. 69

    Well, i like to add some “tools” or “generic” declarations in my css that i can apply here and there. Using the !important on them help to apply them everywhere easily.

    2
  70. 70

    I have to agree that !important tags are wrong when you have control of the stylesheet and the markup, but when you deal with situations like Sharepoint or trying to skin ugly coded cms’s like Oscommerce you have to use it sometimes sparingly.
    It’s the only tool to defeat hard coded inline styles so those of us sho have fought it before know it’s power.

    1
  71. 71

    I use !important when creating email templates in inline styling. In order for your styles to override web email systems (gmail, yahoo, etc) you’ll need to use !important from time to time

    1
  72. 72

    great article in explaining how to use !important and I agree it should only be used when needed, unfortunately many times its needed a great deal when you’re working with large scale application suites, CMS etc. @igotux

    0
  73. 73

    Actually, I did re-read the article when I returned to respond to your comment so that I wouldn’t look clueless when I commented. I found that BSA ads were not in your list, nor did they fit into any of the categories. So others don’t have to scroll back, I’ll repost that list of six exceptions, here:

    1. to aid or test accessibility
    2. to temporarily fix an urgent problem
    3. To Override Styles Within Firebug or Another Developer Tool
    4. To Override Inline Styles in User-Generated Content
    5. For Print Stylesheets
    6. For Uniquely-Designed Blog Posts

    None of these items are about BSA ads, or fit that scenario. Again, you stated “should not be used unless they are absolutely necessary” – in bold – coupled with “after all other avenues have been exhausted”.

    I don’t think BSA ads fall into category ‘absolutely necessary’. While I don’t have the time nor inclination to do in-depth research into BSA ad conflicts, I took a look at two other Smashing Network blogs, Six Revisions and Web Designer Depot. Both use BSA ads. Between the two sites, there is only one declaration of !important – on WDD, and not related to BSA ads. It is apparent that all other avenues were not exhausted.

    My previous question remains. Will SM be cleaning up their own code, and if not – should we, your students, follow suit and also continue to use !important with reckless abandon?

    -3
  74. 74

    Why not use DD_belatedPNG? It is a much more elegant solution.

    http://www.dillerdesign.com/experiment/DD_belatedPNG/

    or use conditionals to use an IE6 style instead?

    -1
  75. 75

    @Mike:

    Why are you repeating the same layout styles?

    display:block !important;
    display:inline;

    position:absolute;
    position: relative !important;
    float:left;

    something can’t be position absolute, relative and floated left and work right cross-browser. It’s going to the left because it says float: left.

    Not sure what you are trying to accomplish here.

    -1
  76. 76

    Mark,

    In my case, the use of !important in the BSA styles would fall under #2, “To temporarily fix an urgent problem”. BSA code gets pulled from two different places, from their server and your own styles. At the time, it seems that I forgot to reset the styles on the BSA server, and mine were not taking effect, so I used !important to fix it as quickly as possible.

    Regardless, my site is not as important as client projects, and other work that brings in more money for me, so I didn’t really care that I had uses of !important that wouldn’t effect the rest of my stylesheet anyhow. And obviously, since I was able to go back and correct the BSA styles without the use of !important, then that only demonstrates that the advice in the article stands: In most cases, you should never use it.

    What’s ironic is that I could send you links to 30 or more projects that I’ve written CSS for, and you won’t find a single use of !important in any of them. Send me an email through my website, and I’ll gladly send you those links.

    So what exactly is the point of your comments? Are you trying to justify the use of !important in your own stylesheets? I don’t get what you’re trying to prove here? Do you have a better analysis of !important that we don’t know about? Your free to write your own article. You’ll get paid nicely for it, too.

    As far as SM, I have no idea who does their coding or why they use !important so much. SM allows authors to have their own voice, and aren’t necessarily bound by the rules and principles stated by authors anyhow.

    3
  77. 77

    BTW, Mark –

    Don’t get me wrong here. I appreciate that you and a few others reminded me to check my own work. For the record, I admit that my use of !important in a few instances was not necessary, and seems to only have been a quick fix for what I consider an important part of my website.

    That’s why I write articles like this, so I can hear people’s comments, and improve my own view. So I apologize if I was rude in any way. But I do think it was wrong for you and that other commmenter to state that my stylesheets were ‘loaded’ with !important declarations, when nothing could be further from the truth.

    Also, here’s what SitePoint’s reference says on the matter of using !important:

    Introducing even one uncommented important declaration into an author style sheet has a huge negative impact on the style sheet’s maintainability, so it should be used with care. The only way to overwrite an important declaration is by using even more important declarations—an approach that soon becomes unmanageable. A style sheet that’s littered with important declarations often signals that an author hasn’t thought clearly enough about the structure of the CSS.

    So, if you don’t trust me, trust them, a more authoritative source.

    0
  78. 78

    Nice article. But I’m afraid you made a small mistake in the article. In the section “A Brief Primer On The Cascade” you mentioned that declaration from the author is given more importance that declarations from the user. That would only be for CSS1 as you mentioned in the later part of the article. It would be misleading listing it CSS1 there.

    0
  79. 79

    Ah. Temporary and urgent. I apologize. I didn’t realize BSA snuck up on you with their ads, and that your site was brand new.

    I apologize that you felt you were wrongly labeled. But since, as I’ve said, I never use !important – as advised by your own article, to me 13 uses of it is what I would consider to be “loaded”, especially from someone writing an article about why you shouldn’t use it.

    I have to apologize for my further ignorance, as I’ve looked into BSA, and they now accept all types of sites, not just design-related blogs. I stated that the future may require we all start using !important for our sites that have BSA ads – but it seems that that future is now.

    By what I take away from this article, I should start using !important. But only a dozen times or so per stylesheet – “not loaded”.

    0
  80. 80

    Sitepoint.

    Sitepoint is a marketing business, not an authority. I hold them in no higher esteem than any blog or other for-profit about design. Sitepoint owns 99designs, a company that may have single-handedly impacted the earnings for designers of web [and other] design downwardly than any other organization. Honestly, I’ve found information here at SM far more valuable in my own work than anything I’ve ever gleaned from SP’s countless books.

    Regardless I’m not sure how Sitepoint’s statement improves your position.

    “even one”…”has a huge negative impact”. If one is huge, would 13 not be astronomical? At what point does it become “loaded”, if one is “huge”?

    1
  81. 81

    Grate article

    0
  82. 82

    NEVER apart from testing…. Yer i agree 100%

    0
  83. 83

    i have seen the !important; attribute used in many of my jquerry style sheets and have never understood why, as they never seemed to have any importance. i have had the problem when cascading my styles and will now give this a go. cheers

    0
  84. 84

    I consider the !important declaration a hack even if it is valid code. I try and make my CSS style-sheets cross browser compatible without using any so called “hacks”. Although I do use !important to override remote style-sheets. This gives me control over some widgets and forms that are generated via scripts and fetch their own styles by default.

    0
  85. 85

    The Find function doesn’t help me and there are too many posts to check one-by-one, so i assume it hasn’t been said: Internet Explorer 6 has a developer debugging tool.
    I found and used Microsoft’s Developer Toolbar in the past: http://www.microsoft.com/downloads/en/details.aspx?familyid=95E06CBE-4940-4218-B75D-B8856FCED535&displaylang=en
    other info here: http://en.wikipedia.org/wiki/Internet_Explorer_Developer_Toolbar
    you also have Firebug Lite: http://getfirebug.com/firebuglite

    0
  86. 86

    I normally don’t use !important, but have just come across somewhere where I might use it, and would like others opinions.

    In .NET, I have a background-image defined for all input fields in a form. I want this style to be used for all fields, except the button. When you define an asp:Button, it gets converted into an input field. You can specify a CSS class for the button, which I have done, but the background-image in that doesn’t overrule the one of the input CSS declaration, unless I define it as !important.

    This seems valid to me, but I’m not 100% sure. Any thoughts?

    0
  87. 87

    Sorry but i find it a bit silly to ‘NEVER’ use the ‘!important’ declaration.
    Ive written CSS for very arge websites and if I were to of never used the ‘!important’ declaration then i would of possibly died from massive stress overload.

    I think its fair to say try every other way possibly before resulting to the ‘!Important’ declaration but i don’t believe it should be avoided entirely.

    Matt.

    2
  88. 88

    I agree with Matt and Bob, !important shouldn’t be avoided completely, but as a last ditch effort. It is a useful tool.

    For instance, say you you have a div that you want to add a div dynamically on hover to change its background color. The order of the declarations is important. Of course you could makes sure the order of the stylesheets makes the hover class high on the food chain, but if you don’t have control of the order of the stylsheets, then you have to use !important to make sure the class takes precedence. Otherwise, the style application may depend on the how the stylsheets are ordered.

    0
  89. 89

    I agree that !important should be used in special circumstances. Great article!

    0
  90. 90

    I believe that in great many cases the !important property is misused because people don’t necessarily understand that some CSS selectors override others disregarding their order in the stylesheet. For example:

    #element p {
    font-size: 10px;
    }

    p {
    font-size: 10px;
    }

    An id has a higher rank than a class. That’s why the latter declaration gets overwritten by the preceding one. In frustration of not understanding why something won’t work, an !important is often a quick solution. I’ve found myself in a similar situation many times and the reason for using this dirty trick is that I don’t have time (=money) to spend on fixing it properly. All these situations involve a third party utility or software like a CMS and there’s always an id selector somewhere in the CSS jungle which overrides everything.

    In my opinion all this has everything to with people misusing id’s as selectors.

    -1
  91. 91

    Absolutely. The !important declaration is very helpful when creating generic classes.

    I totally disagree with “never”. If you learn how to properly use and understand CSS, !important becomes very important. Especially when using new emerging CSS languages like Compass and Sass which are based on the idea of creating mixins, variables, nesting, and most importantly extending CSS. Write less, do more.

    I do agree that you shouldn’t write !important to be lazy.

    1
  92. 92

    Who are you to tell us when we can’t use !important.? Go soak your head. :)

    1
  93. 93

    @Chris Your

    Wouldn’t the use of media queries in your example of using emerging concepts that may only be available within certain browsers resolve your usage of !important?

    Further more with your example in particular, these sort of emerging concepts use vendor prefixes anyway so again the use of !important is overruled.

    I would take a step back and look at this in a more ethical sense.

    In the scenario that you wish to use !important because you have a major bug fix for example that is resulting in faulty functionality, you could use !important to resolve an issue. But why are you? It could be because you don’t feel that you have sufficient testing to time debug the problem and as such are putting in a temporary patch. How many temporary patches do we put in that end up becoming permanent? In my experience (although not with my own code I haste to add) the ratio is very high. For every ‘temporary fix’ we implement in our code the number of them that get reviewed is near zero.

    There’s a good reason for this, the time that wasn’t available when it was an emergency, doesn’t suddenly become available at a later date because the weighting of the problem has changed from the business objectives, just as we have fudged the elements weighting with the use of !important in the css.

    It becomes harder to justify the time and cost of fixing a problem which to many investors will not appear to be a problem. After all, you’ve already fixed it right?

    1
  94. 94

    Thanks for this, it’s been of great use to me! Keep up the good work!

    -1
  95. 95

    great article. !important
    thanks for that. !important

    -1
  96. 96

    Ven Francis | Web Ninja Wannabe

    January 4, 2011 7:56 am

    now this article is !important :P

    0
  97. 97

    Ravi Suryawanshi

    March 26, 2011 12:52 am

    Great article!!

    -1
  98. 98

    I was working on a fancy web-app, where the design had a set of element dimensions, fg/bg colours, content h/v alignments and these were used in different variations, not depending on some logic (link could have any bg of the set), so I used these kinds of non-semantic names. What would have been a good alternative? Inline?

    0
  99. 99

    Is useful to know it, but I think we should not use it in CMS apps if they are going to be modified by developers or designers. More easy for all.

    -1
  100. 100

    Great article. I avoid the use of !important when possible but use it often during the development phase of a website to quickly test changes to the CSS. Is there any known way to override !important if used in an inline style? Other than the obvious user stylesheet. …perhaps a script to strip !important from all inline styles?

    0
  101. 101

    Thank you for given main idea ./

    0
  102. 102

    Thanks, you just saved me :)

    0
  103. 103

    I wrote a little jQuery animation for an HTML div with CSS min- and max-height properties and overflow:auto. Unfortunately, calling the jquery animate() method seems to reset the overflow of this div to hidden. The simplest and probably the best way to fix this is to force the animation to leave the overflow at it’s original setting by specifying overflow:auto !important

    -1
  104. 104

    I really don’t like the !important syntax.

    Whoever first invented “!important” for overwriting CSS definitions in CSS1 wasn’t a programmer. Why? In many popular programming languages (perl,javascript,php,..) “!something” means “not something”. So whenever I switch to CSS coding !important reads for me like “not important ” or “This CSS part is not important.” BAM!

    Logically weird and I don’t like such stupid productive thinking stoppers in my mind.

    Was the first author and the collegues in the CSS1 consortium accepting it from spain because in their languages they use inverted “!”-sign in front of sentences like “!blabla blabla!” and in questions “?blabla blabla?” the inverted question character?

    Further this syntax is redundant:

    ! means in sentences imporant.
    important means -well- imporant. ;-)

    So it is “important important”.

    Stupid, huh?!

    0
  105. 105

    I know this article is quite old, but today, one of the first times, I have a situation where I can not find a way around !important.
    My company created a module for different shop-systems (Magento, Shopware, XTCom.. etc.) and we deliver one single SDK for all of them.
    The idea is to have the same JS-Architecture (A BackboneJS APP) and CSS (except of minor adjustments) for all shop-systems to make it maintainable.

    Now, all shop-systems have different styles of written CSS and (of course) some selectors overwrite the ones of my module-CSS.
    If I would only write for one shop-system, I could just extend the selectors, to overwrite the shop-CSS.
    But, as selectors for different shop-systems are different, this is not a solution at this time.

    So I guess, here we have one of these less cases for !important usage which makes sense (still I don’t like it though).

    0
  106. 106

    The most confusing thing about the !important declaration to me is the placement of the exclamation point. I have a programming background and I read this as NOT important. lol

    0
  107. 107

    If you have long statements of css and you need to override a single rule, e.g. you have a set of rules that defines some buttons, and now you use these styles on another page, where you need to center align a button, then it is very smart to use !important as this will overrule only a single value e.g:

    margin: 10px 0 0 25px !important;

    0
  108. 108

    I kind of disagree with some of the user comments. I am developing on wordpress and I don’t have control over some things (styles just seem to get overridden by either themes or plugins) and therefore I can’t apply what I want for specific elements.

    I know the article does say don’t ever use it unless you have no other option (which I didn’t, of course, so I fall under that category) but I think people need to be a bit more open minded. A theme I was using would display a logo in the nav menu, I removed the logo and it then displayed the websites title in the nav menu (something I also didn’t want). I found the class being applied and did a display: none; and that was overridden by something else that was more important apparently.

    The !important tag for my display none saved me a bunch of time of perhaps having to manually download and edit the theme and its css myself then reuploading it.

    Basically all I’m saying is everything has its purpose, I think the author knows this, although maybe he would still rather prefer to do it the long way rather than using !important.

    0
  109. 109

    I’ve had to use it recently to override a framework’s baked in CSS (Bootstrap).

    I supposed Bootstrap wasn’t really a thing in 2010, but I’d imagine overriding a CSS framework’s ever-so-specific styles is probably a normal use-case these days.

    0
  110. 110

    It was my understanding that !important should be used very sparingly. I’ve found it useful for print pages where certain elements get stripped out that I don’t want printed.

    0
  111. 111

    This is a work of art. The article is very informative and I am sure this will be a lot of help especially those who are in this kind of field. Keep it up!

    1

↑ Back to top