Problem
I’ve been working on a website for a few months, and I’ve had to use a number of times when trying to modify something. Consider the following:
div.myDiv {
width: 400px !important;
}
in order for it to appear correctly. Is this a bad habit to have? Is it acceptable to use the!important command? Is it possible that this will have unfavorable consequences in the future?
Asked by Kyle
Solution #1
Yes, I’d think your use of! is a good example. Important is bad practice, and it’s quite likely to have unintended consequences down the road. That isn’t to say it’s never appropriate to employ.
When the browser chooses how CSS impacts the page, one of the key forces at work is specificity. The more specific a choice is, the more weight it gains. This usually corresponds to the frequency with which the selected element occurs. Consider the following scenario:
button {
color: black;
}
button.highlight {
color: blue;
font-size: 1.5em;
}
button#buyNow {
color: green;
font-size: 2em;
}
All of the buttons on this page are black. Except for the blue buttons with the class “highlight.” Except that one unique button with the ID “buyNow”, which is green. The importance of the entire rule (both the color and font-size in this case) is managed by the specificity of the selector.
!important, on the other hand, is added to a property rather than a selection. If, for example, we applied the following rule:
button.highlight {
color: blue !important;
font-size: 1.5em;
}
The color attribute would thus take precedence over the font-size property. In fact, when it comes to the button#buyNow selection, the color is more essential than the font-size (which is still governed by the regular ID vs class specificity).
The font-size of an element with the class=”highlight” id=”buyNow”> would be 2em, but the colour would be blue.
This has two implications:
This not only makes maintaining and debugging your stylesheets much more difficult, but it also creates a snowball effect. One!important triggers another to override it, which triggers yet another to override that, and so on. It almost never stays with just one. Even though one !important can be a useful short-term solution, it will come back to bite you in the ass in the long run.
This is the situation! important was created for the sole purpose of allowing users to override website designs. Accessibility technologies such as screen readers, ad blockers, and others rely heavily on it.
As a developer, you should strive to have as much control over your code as possible, but there will be times when you are unable to do so and must work with what is available. Use!important only when absolutely necessary.
Utility classes such as.hidden,.error, and.clearfix are included in many libraries and frameworks. They have a single function and often follow only a few, but crucial, guidelines. (For a.hidden class, for example, display: none). These should take precedence over any other styles on the element and, in my opinion, deserve an!important.
The!important declaration is frequently regarded as bad practice because it has side effects that interfere with one of CSS’s most crucial mechanisms: specificity. It’s possible that utilizing it indicates bad CSS architecture in many circumstances.
There are cases in which it’s tolerable or even preferred, but make sure you double check that one of those cases actually applies to your situation before using it.
Answered by Stephan Muller
Solution #2
!important makes the statement always true by doing the following:
!important may usually be avoided because the specificity of selectors determines which one takes effect, which is the concept of cascading styles. However, there are some instances (I can’t recall which one) when the specificity isn’t as reasonable as it should be, and I have to force!important on the statement.
Reasons to avoid/do not use! important?
Answered by Delan Azabani
Solution #3
I believe it is critical that we revisit this topic now, as additional rules are being introduced to the working draft, because it is critical not to impose restrictions on your users. This tiny example was written to illustrate a conceivable scenario in which such an event occurs. This is a screenshot from a REAL website I’ve visited on the internet, and I see it all the time.
You have a website that relies on you filling out forms and making text edits. To reduce eye strain, you choose a style that you think everyone would like, and because your users mostly visit at night, you choose a white background with black writing. Because the form is blank by default, you must write in text (this time) to ensure that it functions:
...
background-color: black; /* I forgot important here, but it works fine on its own */
color: white !important;
...
A few months later, users complain that white-on-black is too eye straining but the other half love it, what do you do? you add a custom theme that uses ! important to override the internal styles so that BOTH parties are happy, which is what it is SUPPOSED to be used for:
...
background-color: white !important;
color: black !important;
...
So, what’s going on here? So, what were your expectations? You would have seen that it didn’t work if you recalled the!important tags from the first set, and you would have remembered that you needed to remove the!important tags. You did, however, leave one out.
If you apply this new design, you’ll get white text on a white backdrop, and the user will be unable to view your webpage at all (assuming you kept it).
Of course, because the textbox is empty, you are unaware of this. And you’re assuming it’ll work! (Assumption, along with pride and hubris, is a developer’s biggest adversary.)
As a result, the first guideline should be to only use! When creating OVERRIDES to a whole set of CSS rules, this is crucial. Remember that it is meant for exceptions and disturbs the natural order and meaning of css in the first place. In MOST cases you will not need to use it at all.
With the availability of extensions and sites like ‘userstyles.org’ and its stylish counterpart, you run the risk of alienating your users if you utilize the!important tag at all. Keep in mind that they will not be overridden by becoming fashionable.
If you use!important on a style, make sure the user can disable it (and I don’t mean through the web browser’s internal ‘on/off’ button). For the love of God, don’t make it DEFAULT.
People are utilizing fashionable for ad removal less and less, thus I don’t think guarding advertisements with! Here, importance is a serious concern. It will irritate anyone attempting to alter your website.
Answered by osirisgothra
Solution #4
I’m a little late to this question, but it’s basically stating “ignore all other styles and use this one.” You might be confused by the! in front (of the!important) because it’s a not operator in javascript, but it’s called a delimiter token in CSS and simply means “take priority.” Here’s an illustration.
Without !important:
.set-color{
color: blue;
}
.set-color{
color: red;
}
outputs RED
! essential attribute at the bottom (of same)
.set-color{
color: blue;
}
.set-color{
color: red !important;
}
RED outputs (would have been red anyways)
! significant attribute at the top (of same)
.set-color{
color: blue !important;
}
.set-color{
color: red;
}
produces BLUE (suggests ignoring red and instead using blue)
Answered by garrettmac
Solution #5
Using!important is, in my opinion, a terrible CSS practise. It breaks the natural flow of applying CSS rules, which is to apply properties from top to bottom. With the addition of!important, the property will now prioritise the most recent important value.
It’s just like using the goto keyword in scripts. Though its are perfectly legal, it’s still best avoided.
Answered by gianebao
Post is based on https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css