The Importance of Using !important in CSS Styles

I just lost time trying to hide a CSS border in a third-party control, so it’s worth a quick post to help others avoid similar frustration.

I could plainly see in the Internet Explorer 8 developer tool that an unwanted border in the Telerik RadRotator  was coming from the style classes named .RadRotator_Web20 and .rrClipRegion. So, to remove the border, I inserted my own style in the page as an override:

.RadRotator_Web20 .rrClipRegion
{
    border: 0px;
}

No change! WTF???

Okay, after spending too much time trying other stuff, I recalled that I had used !important in CSS before. The !important rule takes precedence over a normal declaration, so this worked:

.RadRotator_Web20 .rrClipRegion
{
    border: 0px !important;
}

And there’s another in Ken’s unending series documenting how I’m not able to figure out simple things quickly. <grin>

Ken

3 Comments

  • Was the original !important really that important? Use of !important is a very last resort thing IMHO - it reeks of hacking - especially if you need to override it again. If you didn't have control over the original CSS then yes you may need to use this but you might need to question the original use...

  • I agree with kouphax - you should be finding the original declaration and simply using a more specific selector to indicate precedence. Stylesheets filled with !important declarations are a nightmare to debug / override, !important usually indicates a lazily, hacked together stylesheet.

  • For the record, there is a simple tool for customizing the skins for most Telerik controls (including RadRotator): http://stylebuilder.telerik.com. Definitely a better long term solution than !important overrides. :)

Comments have been disabled for this content.