6 ms·

!important CSS Declarations: How and When to Use Them

32 points by kingsidharth 16y ago

klochner 16y ago
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.
- Hovertruck 16y ago
  At Webs (Freewebs once upon a yesterday) we allow people to add custom CSS to their websites that they build on our service. To make things simpler on our end we make user-added rules !important so they don't have to worry about the cascade. That said, probably 98% of our users aren't interested in CSS anyway.
- eschutte2 16y ago
  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 16y ago
    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 16y ago
      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.
cemregr 16y ago
!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 16y ago
  !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.
deleted 16y ago
[deleted]
rryyan 16y ago
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 http://www.w3.org/TR/CSS2/cascade.html#cascading-order
dangrossman 16y ago
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 16y ago
  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.
zb 16y ago
Does anybody else's brain still parse "!important" as "not important"? Perhaps I have been programming in C for too long.
- qeorge 16y ago
  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.
DjDarkman 16y ago
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.

32 points by kingsidharth 16y ago

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.

Hovertruck 16y ago
At Webs (Freewebs once upon a yesterday) we allow people to add custom CSS to their websites that they build on our service. To make things simpler on our end we make user-added rules !important so they don't have to worry about the cascade. That said, probably 98% of our users aren't interested in CSS anyway.
eschutte2 16y ago
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 16y ago
  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 16y ago
    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.

cemregr 16y ago

!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 16y ago
!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.

deleted 16y ago

[deleted]

rryyan 16y ago

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 http://www.w3.org/TR/CSS2/cascade.html#cascading-order

dangrossman 16y ago

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 16y ago
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.

zb 16y ago

Does anybody else's brain still parse "!important" as "not important"? Perhaps I have been programming in C for too long.

qeorge 16y ago
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.

DjDarkman 16y ago

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.