The CSS !Important Rule
The CSS !important rule allows users to overwrite author declarations. It is therefor best to avoid using it in StyleSheets.
Edited: 2017-11-29 02:03
The !important rule of CSS is used to give declarations precedence over normal declarations. The rule is intended to allow users to overwrite authors (web- designers & developers) declarations in a sites CSS embedded CSS, and external CSS StyleSheets.
It can also be used by authors to overwrite their own styles, but this is generally considered a bad practice, because it is easy to code your HTML (with classes and IDs), so that you do not need to think about using !important. There are times when a given rule in a author StyleSheet, has taken precedence over other rules, in which case they can either use the !important rule (as a quick and dirty fix), apply a class or ID or change their selectors to be less general. I.e. writing the below:
article a:link {}
article a:visited {}
article a:hover {}
article a:active {}
Instead of just writing a:link {}, without the targeting the article element. Writing more specific rules can avoid most problems when coding CSS.
However, !important rules specified by users will have precedence over the author !important rules.
Users
Users can use the !important rule if they find a website hard to view. I.e. Color blind users. The question is if they will do it. Most users likely don't understand CSS that well, (if at all), and likely ain't aware of the possibility.
It may be better to provide Multiple color schemes for a website, but this can sadly be a tedious task.
Users can add their own default styles to a custom StyleSheet, and then load it up in their browser. Some browsers allow this directly from the settings section. If you wish to add your own StyleSheet to your browser, you should read the article: Using custom StyleSheets with your browser.
Authors
You may have tried it already, when you try to keep things as clean as possible, you often end up with overlapping styles at some point. A quick and "dirty" fix to this problem is to use the !important rule.
Since !important can raise its own issues, it is recommended to avoid it, unless it is really necessary. I.e. It is not possible to be more specific with CSS declarations.
Using the !important rule
In the below example we first select all img elements inside a, then we try to overwrite that selection with the !important rule, using a less specific selector that targets all img elements.
/* Normal declaration */
a img {border:3px solid #000000;}
/* With !Important */
img {border:3px solid #000000 !important;}
The last declaration will take precedence over the first in this example, despite being less specific about which elements to apply the style to.
This is not normally possible. The more specific a selection is, the higher precedence it will have. The !important rule takes the highest precedence, regardless of how specific the declaration itself is.
Tell us what you think: