When I see someone using !important, it usually means they don’t understand CSS specificity. Yes, it “prioritizes” properties by adding a very high specificity value to the selector, but not understanding the ramifications of using it can make writing other rules in the future more complicated. As a simple example, let’s say I want to make all of the links on my site blue. I could add a rule like this:
a { color: blue !important;}
Later on, I decide I want the links in my footer to be red, so I try adding this rule:
.footer a { color: red;}
But, of course, this isn’t going to work, because the first rule’s use of the !important clause gives it a much higher specificity, so now I have to add the !important clause to this rule as well. Pretty soon, you end up using !important to all of your rules. The general guideline for writing a CSS rule is to use only enough specificity to override the existing rule, so that in case you need to override this new rule later, it is easier to do so. So what I do when I want to override an existing CSS rule is to inspect the element using a web debugging tool like Firebug or Chrome Developer Tools, see what the existing rule is, then add a rule with either an identical selector, or with a selector which has an additional element to make the selector a little more specific than the existing rule (if my new rule is going to come before the existing rule). The only time I use !important is if I need to override an inline style (which is the only way to override an inline style) or if the existing rule has so many elements in the selector that it’s impossible to add a new rule with additional elements (somewhat unusual).
