When to use "!important" to save the day (when working with CSS)
Consider this:
#someElement p {
color: blue;
}
p.awesome {
color: red;
}
How do you make awesome
paragraphs always turn red, even ones inside #someElement
? Without !important
, the first rule will have more specificity and will win over the second rule.
Only as a last resort! This is because once used it is hard to override it. My rules of thumb:
- Never use
!important
on site-wide css, or when writing a plugin/mashup. - Only use
!important
on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example). - Always look for a way to use specificity before even considering
!important
.