!important CSS Declarations - How and When To Use Them - Smashing Coding

!
important CSS Declarations: How and When to Use Them | Smashing Coding
!important CSS Declarations: How and When to Use Them

By Louis Lazaris
November 2nd, 2010
CSS, Essentials
109 Comments
Advertisement
When the CSS1 specification 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.
Lets 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
declarations and exactly how they work, lets give this discussion a bit of context. In the past, Smashing Magazine has covered CSS specificity in-depth, so please take a look at that article if you want a detailed discussion on the CSS cascade
!important
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 cascade 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
Declarations from the user with
added
!important
!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. Lets look at
!important
in more detail.
Syntax and Description

An
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 Czerniak for pointing out this discrepancy). Here is a simple code example that clearly illustrates how
!important
!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
Without the use of
When
If
#example
). But with the inclusion of
!important
!important
, the first
font-size
!important
rule now has more weight.
declarations:
was first introduced in CSS1, an author rule with an
!important
!important
declaration held more weight than a user rule with an
!important
declaration; to improve accessibility, this was reversed in CSS2
is used on a shorthand property, this adds importance to all the sub-properties that the shorthand property represents
!important
The
, 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. its listed second). Also, the second block has more specificity ( #container followed by
!important
instead of just
#example
Some things to note about
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 wont break it)
!important
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 doesnt
invalidate your CSS)

In IE6 and IE7, if you use a different word in place of
(like
!important
), the CSS rule will still be given extra weight, while other browsers will ignore it
!hotdog
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? Heres my subjective overview of potential valid uses.
NEVER
declarations should not be used unless they are absolutely necessary after all other avenues have been exhausted. If you use
!important
!important
out of laziness, to avoid proper debugging, or to rush a project to completion, then youre 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
, youre
disrupting the natural flow of your rules, giving more weight to rules that are undeserving of such weight.
If you never use
, then thats a sign that you understand CSS and give proper forethought to your code before writing it.
!important
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
A special needs user can add
declarations, allowing users with special needs to give weight to specific CSS rules that will aid their ability to read and access content.
!important
to typographic properties like
!important
to make text larger, or to color-related rules in order to increase the contrast of web pages.
font-size
In the screen grab below, Smashing Magazines home page is shown with a user-defined stylesheet overriding the normal text size, which can be done using Firefoxs Developer Toolbar:
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
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 users power, even if the author has abused
!important
!important
declaration, the user
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 doesnt 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 doesnt muck up the cascade. When youve 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 Chromes 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 Magazines styles in Chromes
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.
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.
!important
Heres the same style rule with
!important
added. Youll notice the line-through is now gone, because this rule now has more weight than the rule that was previously overriding it:
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 wouldnt 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 youve dabbled in uniquely-designed blog posts (many designers take issue with using art direction for this technique, and rightly so), as showcased on Heart Directed, youll 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 post on the Digging Into WordPress blog.
The use of
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.
!important
Conclusion
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
Nonetheless,
!important
!important
is not always necessary.
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. Its certainly beneficial to understand it better and be prepared to use it should the
!important
need arise.
Do you ever use
in your stylesheets? When do you do so? Are there any other circumstances you can think of that would require its use?
!important
Further Resources
!important rules in the CSS2.1 spec
!important Declarations on SitePoints CSS Reference
CSS Specificity And Inheritance on Smashing Magazine
Everything You Need to Know About !important CSS Declarations
What are the implications of using !important in CSS?
It's done. The Smashing Book #4, our brand new book with smart techniques, ideas and approaches for front-end development and design. Written by respected designers and developers, neatly packed in a gorgeous hardcover.
Get the book now.
Tags:
CSS
Essentials
Share on Twitter
Back to top
Louis Lazaris
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.
Related Articles
70 Expert Ideas For Better CSS Coding...
Part 1: Styling Design Elements...
CSS Specificity And Inheritance...
Advertising
109 Comments
ZizzelDaZuz
Best Comments
November 2nd, 2010 5:45 am
Thank you for that article! My gut feeling always told me to avoid this ;-)
Reply
growdigital
Agree with Louis on this one, though could have a been a shorter article if Louis had simply said:
DONT. EVER.
;)
Reply
DesignHamper
Awesome. How this great idea you get ? I think !important s behavior very from browser to browser.
Reply
Bassem
In my experience so far, the usage of !important can always

be overcome with other measures. Its a good article for those who
are not familiar with the keyword, however for the more experienced
readers its merely an average read.
Reply
DJ
I disagree..I know that Ive 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 wouldnt be supported by CSS3 and the browsers.
Reply
Jaryl
November 2nd, 2010 7:50 pm
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.
Reply
Steven Schrab
I use the !important declaration as a hack for IE6. IE6

doesnt recognize !important. It also doesnt 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 its 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, Id say avoid it.
Reply
Louis
Just to clarify:
IE6 doesnt ignore !important declarations; it ignores an
!important declaration for a property thats repeated in the same
declaration block.
IE6 treats !important exactly the same as every other browser, except for the above.
Reply
James King
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.
Reply
Dave Sellers
10
Yep its definately useful for overriding inline CSS that you dont have any control over.
I also occasionally use it if I am using a class specifically for
changing text colour. For example Ill 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 :)
Reply
James
November 3rd, 2010 4:30 am
11
.blue and .green are perfect examples of non-semantic class names that should never be used.
Reply
Olev
December 9th, 2011 12:44 pm
12
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?
Reply
Jay Khatri
13
Its even really important when Asp.Net dont show the

validator content as the property never get changed from display:none.
we can manage this. Regarding Asp.Net, It really dont 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 cant make any Tableless website.
I think this is the reason of phps poplarity.
Reply
Tom
14
True. I also sometimes have to use it for exactly this reason.
Reply
Chris Coyier
15
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 theyll get applied, like:
.last { margin-right: 0 !important; }
Reply
Louis
16
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 cant justify its use even in those
circumstances. I guess its acceptable for a personal blog or
something, though, since its unlikely anyone else will use the
code.
Reply
Chris Your
November 19th, 2010 9:51 am
17
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 shouldnt write !important to be lazy.
Reply
Its Adam
18
I admit Im abit of a pain for using the !important

alot.. really does vary from job to job and depending what its
actually for.
I suppose if youre doing a high paid design job where you have
the time to perfectly layout your CSS then it will perhaps wont
need to be used, however its the real world and sometimes
its 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.
Reply
Louis
19
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 dont know for
certain if thats the best (or only) way to set those styles, but
it just happens to be the only solution that worked on my site.
Reply
Zoe
20
Its Adam might be referring to this website, which by my count has 121 occurrences in the default stylesheet alone.
Reply
Louis
21
Youre 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 dont
necessarily reflect the coding practices of the site on which the
articles are posted.
So when he says the authors website, I assume he
knows what hes referring to. In that case, hes completely
wrong, as I hardly ever use !important declarations.
Reply
Mark
22
Im 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 youve 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?
Louis
23
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 peoples
minds that its 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.
Mark
24
Actually, I did re-read the article when I returned to

respond to your comment so that I wouldnt 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 dont have to scroll back,
Ill 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 dont think BSA ads fall into category absolutely
necessary. While I dont 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?
Louis
November 5th, 2010 9:39 pm
25
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 didnt really care
that I had uses of !important that wouldnt 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.
Whats ironic is that I could send you links to 30 or more
projects that Ive written CSS for, and you wont find a
single use of !important in any of them. Send me an email through my
website, and Ill 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 dont get
what youre trying to prove here? Do you have a better analysis
of !important that we dont know about? Your free to write your
own article. Youll 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
arent necessarily bound by the rules and principles stated by
authors anyhow.
Louis
26
BTW, Mark
Dont 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.
Thats why I write articles like this, so I can hear
peoples 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, heres what SitePoints 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
sheets maintainability, so it should be used with care. The only
way to overwrite an important declaration is by using even more
important declarationsan approach that soon becomes unmanageable.
A style sheet thats littered with important declarations often
signals that an author hasnt thought clearly enough about the
structure of the CSS.
So, if you dont trust me, trust them, a more authoritative source.
Mark
27
Ah. Temporary and urgent. I apologize. I didnt

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
Ive 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 shouldnt use it.
I have to apologize for my further ignorance, as Ive 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.
Mark
28
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, Ive found information
here at SM far more valuable in my own work than anything Ive
ever gleaned from SPs countless books.
Regardless Im not sure how Sitepoints statement improves your position.
even onehas a huge negative
impact. If one is huge, would 13 not be astronomical? At what
point does it become loaded, if one is huge?
C.F. Action
29
Nice read. #article { agreed !important; } <== haha! Cheers!
Reply
Dave Sellers
30
I think you missed a colon, it wont validate ;)
Reply
Mohawk Kellye
31
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.
Thats exactly why I use it as well. -_-;;
Reply
Chris Trude
32
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.
Reply
Brad Czerniak
33
!important is not a declaration. A declaration is a

property:value; pair. !important modifies the value of one property. I
dont 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. isnt 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!
Reply
Louispost author
34
Brad,
Youre absolutely right. An !important declaration is actually
the entire line, including the word !important. I guess I
didnt 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!
Reply
John
35
!important is awesome, it makes my styles work everywhere so I put it on everything. It even works in IE6.
Reply
Yoav
36
In my mind its 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.
Reply
decibel.places
37
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; }

...
Reply
Mike
38
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 its going to the left?

Reply
Louis
39
Mike, Im not completely sure what youre 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.
Reply
Adam
40
Mike, I think a line-height should work.
Reply
Mike
41
@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;
}
its still going left.
Reply
John
42
@Mike:
Why are you repeating the same layout styles?
display:block !important;
display:inline;
position:absolute;
position: relative !important;
float:left;
something cant be position absolute, relative and floated left
and work right cross-browser. Its going to the left because it
says float: left.
Not sure what you are trying to accomplish here.
Reply
Ryan Mathis
43
Thanks, hacks are for chumps.
Reply
Jeremy Carlson
44
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.
Reply
Michael
45
This is interesting. YUI CSS uses the * CSS hack for IE6
declarations, but the CSS doesnt 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.
Reply
Ryan
46
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.
Reply
John
47
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?
Reply
Ryan c
48
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 cant 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.
Reply
Tom
49
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!
Reply
David Hendry
50
Great article !important feels like a hack when its

being used, but once youve exhausted all avenues you just have to
use it especially when branding SharePoint, Microsoft loves
their inline styles!
Reply
Lucian
51
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!
Reply
Ferdy
52
Nice. Never too old to learn. Ive 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.
Reply
Alex Karasyov
53
Great article. I wish less people used the !important attribute=)
Reply
stang
54
Ill 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 youll just
stick with !important
Reply
Mark
55
@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 doesnt exist.
Kinda sloppy work for someone lecturing on proper technique.
Theres also one more !important on his Interviews site.
I had forgotten about !important. I havent 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 havent
used !important in at least 4 years. I didnt know anybody was
still using it.
Reply
Louis
56
Mark, the empty stylesheet declaration is for a stylesheet

that gets dynamically changed based on the screen size. I dont
think theres anything wrong with having a linked file
thats 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.
Reply
TheAL
57
Ahhh, the thing that made custom Myspace code possibleby putting it on EVERY line of CSS. *lol*
Reply
Mark
58
^5 Al! Good to meet someone that knows and shares in my [former] pain!
Reply
eric
59
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.
Reply
Pedro Magalhes
60
Its good for IFRAMES ! Where the CSS is included on

other server I try not to use the !important unless its
veeeeeeryy important! :)
Reply
Brad
61
Great article. It really clarified things for me.
Reply
Jay Khatri
62
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.
Reply
Raymond Bloom
63
When Should It Be Used?

To Override Inline Styles in User-Generated Content
Oh, yes.YES!! You cant imagine how many headaches WYSIWYG
editors, CMS and other generated crap have given me over the
years thank God !important exists, of course, theres 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 thats what I would do, but since it
doesnt work that way !important it is for me! :)
Also, I really liked Steven Schrabs approach using it
as a IE6 hack, of course, sad that we still have to develope something
for IE6
Reply
Karen Wilson
64
Thanks for the clarity!
Reply
HEM
65
Im 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 elses 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.
Reply
Pankaj
66
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
Reply
Louis
67
Hi, Pankaj.
Thats 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
dont 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 Im not mistaken, many browsers
allow anyone viewing a website to override the stylesheet using their
own stylesheet. The FF developer bar allows this, and Im assuming
the other browsers dev tools do too. These user
styles will obviously only be visible to the user that applies
them. Theyre 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.
Reply
Pankaj
68
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?
Reply
Louis
69
Yes, the user-created style sheet (viewed locally) will

override the styles of the browser or even the author. But you
dont 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!
Reply
Pankaj
70
It certainly does. Cant thank you enough for your help.

We also understood when to use !important, & when to avoid it.
Cheers.
Gaurav Mishra
71
.this-post-is
{
miss:dont !important;
}
Reply
Victor
72
Nice article !
Reply
Kiyan
73
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 ,thats 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.
Reply
Edward Wieczorek
74
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
Reply
Bob
75
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 youre 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
dont always have complete control when using third party
apis, etc. in your web projects.
Reply
valk
76
This is great!
Thanks.
Brief and clear and to the point.
Reply
Basic Desginer
77
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 ? Arent those
two same as !important ? They define specificity, define rules and
importance. Thats the same !important does. Whats the
difference in processing it ? Yeah, dont tell me , a messy
looking style ? Bah, I dont agree. I agree that you
shouldnt overuse this property, but also I do encourage its
usage. But anyway, all in all, it is a great article.
Reply
LC
78
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.
Reply
Francisco
79
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 cmss like
Oscommerce you have to use it sometimes sparingly.
Its the only tool to defeat hard coded inline styles so those of us sho have fought it before know its power.
Reply
Les
80
I use !important when creating email templates in inline

styling. In order for your styles to override web email systems (gmail,
yahoo, etc) youll need to use !important from time to time
Reply
igotux
81
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 youre working with large scale
application suites, CMS etc. @igotux
Reply
Hector Lee
82
Nice article. But Im 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.
Reply
sekhar
83
Grate article
Reply
David Martin
84
NEVER apart from testing. Yer i agree 100%
Reply
Richard
85
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
Reply
9swords
86
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.
Reply
Flavio
87
The Find function doesnt help me and there are too

many posts to check one-by-one, so i assume it hasnt been said:
Internet Explorer 6 has a developer debugging tool.
I found and used Microsofts 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
Reply
Ian
88
I normally dont 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 doesnt overrule the one of the input CSS
declaration, unless I define it as !important.
This seems valid to me, but Im not 100% sure. Any thoughts?
Reply
Matt
89
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 dont believe
it should be avoided entirely.
Matt.
Reply
Willie
90
I agree with Matt and Bob, !important shouldnt 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
dont 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.
Reply
Ryan Curtis
91
I agree that !important should be used in special circumstances. Great article!
Reply
Simon J.
92
I believe that in great many cases the !important property

is misused because people dont 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. Thats why the latter
declaration gets overwritten by the preceding one. In frustration of not
understanding why something wont work, an !important is often a
quick solution. Ive found myself in a similar situation many
times and the reason for using this dirty trick is that I dont
have time (=money) to spend on fixing it properly. All these situations
involve a third party utility or software like a CMS and theres
always an id selector somewhere in the CSS jungle which overrides
everything.
In my opinion all this has everything to with people misusing ids as selectors.
Reply
Dwight Stegall
November 21st, 2010 4:11 pm
93
Who are you to tell us when we cant use !important.? Go soak your head. :)
Reply
Avanglist
December 4th, 2010 1:08 pm
94
@Chris Your
Wouldnt 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
o
Reply
Reto
December 5th, 2010 5:20 am
nick
December 22nd, 2010 4:36 pm
95
Reply
96
Reply
Ven Francis | Web Ninja Wannabe
January 4th, 2011 7:56 am
97
Reply
Ravi Suryawanshi
March 26th, 2011 12:52 am
98
Reply
Mwantiti
December 20th, 2011 4:05 am
99
Reply
Steedan Crowe
January 4th, 2012 5:47 am
100
Reply
Amrit
March 15th, 2012 6:17 am
Krlis
August 30th, 2012 4:20 am
Stefan
September 16th, 2012 10:46 pm
101
Reply
102
Reply
103
Reply
Peter
April 11th, 2013 11:43 am
104
Reply
Roland
July 23rd, 2013 1:25 am
105
Reply
Dave
August 9th, 2013 7:04 am
106
Reply
dennis iversen
107
Reply
EB
January 6th, 2014 11:57 pm
108
Reply
Nathan Z.
January 30th, 2014 7:55 pm
109
Reply
Leave a Comment
Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and
rel="nofollow"
is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful
conversation instead. Thanks for dropping by!
Your name*
Your email*
Your message*
Back to top
Smashing Book #4
Get our brand new Smashing Book #4, available as print and eBook. Learn more...
With a commitment to quality content for the design community.

Founded by Vitaly Friedman and Sven Lennartz. 2006-2014.
Made in Germany.
http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/[17/03/2014 11:15:07 a.m.]
Write for us Contact us Impressum.
The Smashing Library
Smashing Workshops
Grab all published and upcoming Smashing eBooks, in one swoop. Learn more...
Join our hands-on full-day workshops, run by experts of the industry. Good stuff. Learn more...

!important CSS Declarations - How and When To Use Them - Smashing Coding

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

!important CSS Declarations - How and When To Use Them - Smashing Coding

Загружено:

Авторское право:

Доступные форматы

!

!important CSS Declarations: How and When to Use Them

November 2nd, 2010

A Brief Primer on the Cascade

and how specificity ties in.

Syntax and Description

affects the natural way that styles are applied:

). But with the inclusion of

rule now has more weight.

was first introduced in CSS1, an author rule with an

declaration held more weight than a user rule with an

declaration; to improve accessibility, this was reversed in CSS2

Some things to note about

invalidate your CSS)

When Should !important Be Used?

inherit your projects) will suffer the consequences.

TO AID OR TEST ACCESSIBILITY

to typographic properties like

In this case, the text size was adjustable without using

declaration, the user

TO TEMPORARILY FIX AN URGENT PROBLEM

Heres the same style rule with

TO OVERRIDE INLINE STYLES IN USER-GENERATED CONTENT

is not always necessary.

70 Expert Ideas For Better CSS Coding...

Part 1: Styling Design Elements...

CSS Specificity And Inheritance...

November 2nd, 2010 5:45 am

November 2nd, 2010 5:48 am

November 2nd, 2010 6:03 am

November 2nd, 2010 6:04 am

In my experience so far, the usage of !important can always

November 2nd, 2010 6:14 am

I disagree..I know that Ive been forced to

November 2nd, 2010 7:50 pm

This is a problem within SharePoint and the add-ons that

November 2nd, 2010 6:19 am

I use the !important declaration as a hack for IE6. IE6

November 2nd, 2010 7:46 pm

November 2nd, 2010 6:25 am

In my experience, you should only ever use it to override

November 2nd, 2010 6:41 am

November 3rd, 2010 4:30 am

December 9th, 2011 12:44 pm

I was working on a fancy web-app, where the design had a set

November 2nd, 2010 6:54 pm

Its even really important when Asp.Net dont show the

November 3rd, 2010 6:59 am

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

November 2nd, 2010 6:28 am

November 2nd, 2010 6:04 pm

November 19th, 2010 9:51 am

November 2nd, 2010 6:34 am

I admit Im abit of a pain for using the !important

November 2nd, 2010 5:52 pm

Um No, my own website is not full of

November 2nd, 2010 7:12 pm

November 2nd, 2010 9:14 pm

Youre right, he may have been referring to SM, and

November 2nd, 2010 10:09 pm

Im not sure which site Adam was referring to, however

November 2nd, 2010 10:29 pm

Mark, please read the article again. In the article I gave 6