!important CSS Declarations: How and When to Use Them | Hacker News Reader

!important CSS Declarations: How and When to Use Them

smashingmagazine.com

32 pointskingsidharth13 comments

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

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

Perhaps I have been programming in C for too long.

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.

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.

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.

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.

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!

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.

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.

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.

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.

!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.

!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.

Reply on news.ycombinator.com