When to use “!important” to save the day (when working with CSS)

Question

#div p {
    color: red !important;
}
...
#div p {
    color: blue;
}

I understand how !important works, in this case the div will ren

Answer 1

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.
• Only use !important on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example).
• Never use !important when you're writing a plugin/mashup.
• Always look for a way to use specificity before even considering !important