

!important CSS Declarations: How and When to Use Them - kingsidharth
http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

======
rryyan
CSS inheritance order seems to be a common source of confusion/frustration
among those new to CSS. The relevant section of the actual specification
document is actually a nice, short reference:
<http://www.w3.org/TR/CSS2/cascade.html#cascading-order>

------
zb
Does anybody else's brain still parse "!important" as "not important"?

Perhaps I have been programming in C for too long.

~~~
qeorge
Its awkward, but it means "everything after this rule is !important." So you
are parsing it correctly, its just a weird context.

But now that you've mentioned it, @important would be a lot more intuitive.

------
dangrossman
I imagine if your app provides widgets for others to place on their websites,
!important declarations could let the widget make sure its appearance is not
dictated by the stylesheet of whatever page it's plopped onto, without putting
the whole thing in an iframe.

~~~
zaius
That's what I use it for. It's frustrating that there's no way to turn off /
set a boundary for the cascading in CSS.

------
klochner
I have a specific use case for !important -

When you have a user stylehseet loaded on top of a website's existing
stylesheets.

This could happen when:

    
    
      - using something like the UserStyles plugin for firefox
      - a website allows users to load custom stylesheets into widgets 
      (like facebook used to do with their social plugins)
    

... but I agree that there isn't really a good justification for using the
!important declaration if you have full control over stylesheets.

It's about on par with sticking magic constants in your code.

~~~
eschutte2
I disagree, I have found !important to be the only reliable way to make a
print stylesheet override dynamic styles (width, positioning, etc.) applied by
a JS UI framework (e.g. ExtJS/Sencha).

If someone has a better solution for that please tell me!

~~~
kj12345
One option is if you wrap the ExtJS content in a div with an id of "xyz", then
find the rule you want to override e.g. in Firebug, you can make a rule in
your custom stylesheet that has the same selector as the ExtJS one but
prepended with "#xyz ", and your rule will always be more selective and
therefore take precedence over the ExtJs rule.

~~~
adamesque
This only works if there's an existing style rule to override. The parent post
is talking about overriding styles added _inline_ to elements by JS libraries.

An inline style will _always_ override a rule in a stylesheet… unless the rule
uses !important.

------
DjDarkman
If you create a site's CSS from scratch you will never need !important.
Basically the only good use for !important is when you are dealing with a
buggy CSS that you can't quickly replace.

Using mostly CSS classes helps you avoid the need for !important.

------
cemregr
!important in CSS is what 'goto' is for programming languages. It is a dirty
hack. 99.9% of the time not needed in projects where you have control over all
the code.

~~~
mikeryan
!important and goto are tools in your belt. Like any tool its use should be
predicated on need, and weighed against its possible trade offs and
alternatives.

