Today i wrote a whole stylesheet filled with '!important' rules.
For each rule i wrote i carry a technical debt, The moment someone asks me to revisit this rules i'll be paying a part of that debt.
" And losing Time, Energy and Quality, is the exact opposite of development "
What you should be doing instead is to re-use the rules you're writing, do DRY coding — Don't repeat yourself, also maintain a modular structure to be able to revisit your rules anytime and modify them with ease.
Of course you you'll find cases when you should be using !important,
In my opinion there are two cases:
If your codes are well-structure, you don't need to use !important. But in case of a helper class, you should use it to make sure nothing can overwrite it.
Tommy Hodgins hit it on the head that tis' not so much about not using it, as treating it as your last resort.
IF you "need" it on your on-site code it is probably that there is something wrong with your HTML, how you applied classes/ID's, or with the rest of the CSS. Such problems are extremely commonplace when you get into things like the specificity HELL created by the OOCSS mentality -- slopping classes all over the place based on what you want it to look like instead of what things ARE. It is to that end that most -- if not every -- HTML frameworks are ignorant incompetent garbage since by their very nature they paint you into corners where you may end up resorting to it rather than editing the framework itself.
Just ANOTHER reason I consider HTML/CSS frameworks the pinnacle of developer ineptitude.
One place they are extremely useful though is in user.css -- or client side style -- or whatever the hell else people are calling it this year. Using browser extensions like stylish you can override the designers choices with your own making sites that would usually be a pain in the ass to use be useful again. Just look at the garbage white-on-blue of the "post answer" button and utter chazerei mental midgetry of white-on-green for "submit question" here on Hashnode. It's far easier to just hit those with !important than to dig into the HTML and CSS for the precise specificity -- same often goes for font-sizes such as the inaccessible trash forum software like vBull or Xenforo crap their own bed with.
When making your custom cleint-side user.css to override the site's styles it's often simpler to just:
* {
font-size:100% !important;
line-height:140% !important;
}
body {
min-width:752px !important;
max-width:76em !important;
width:95% !important;
margin:0 auto !important;
font:normal 100%/140% arial,helvetica,sans-serif !important;
}
... than it is to screw around hitting every stupid random size change and mouth-breathing asshat px font declaration or track down all the various random ID's and classes that get thrown in from page to page to page.
My rule of thumb is that if I have to use it in the site's style, there's something wrong with the specificity. By avoiding using it on-page I make it easier for the visitor to use tools like Stylish to use !important to override my choices if so desired.
Tear my site into pizza, this is my plastic fork.
There's a lot of superstition and opinion surrounding !important dating back a long time.
As with any tool:
So having said that, there is a reason !important exists - sometimes you need it as a last resort to have your style overpower other styles. Sometimes this is because of bad CSS you can't change, or HTML you can't change (often when trying to override plugins or embeds). The reason it exists is because sometimes the alternative - getting the same effect done without using !important leads to even uglier code than the 'code smell' of using !important, like using long, complex selectors to bulk up your specificity.
When should you use !important? When every other tool in the toolbox of CSS has failed you and what you need to be able to do is severely ramp up the importance of a particular value for a property.
When should you avoid using !important? If you haven't tried:
Once you've used it on a few projects you'll get a better understanding why it's so useful and often so excessive and why people are so cautious about using it — but the best way to understand all of these things isn't to avoid it, but to try using it yourself and see what happens. Experiment. And try to learn how to override a property with !important (Hint: it involves a more specific selector).
I hope my comment and the other comments here can shed some light on this unloved part of CSS <3
In most cases, it's a sign that your CSS is overriding itself and should be refactored to be simpler; or selectors lightened/weakened.
There are cases where it's ok to use it of course, but not as a general approach to writing CSS. It should only be for cases where you have an extreme need to enforce something, or if you are having to write CSS to override other CSS you can't control (eg. third party code).
Most of the time though, it's just a code smell.
I would use it, if if have certain override classes. but those have to be semantically defined.
.forceNoBorders {
border: none !important;
}
so unique imperative compositions to override certain behaviours. I personally prefer to split CSS between layout and positioning.
But in my opinion every !important that is not in class or is based on a inheritance chain and such -> for example
#my-container {
some-property: some-value !important;
}
.my-container > div.class > span {
some-property: some-value !important;
}
is to my eyes only valid if you don't have access to the source CSS or HTML code. it's still ugly but it's allowed .... still all those definitions should be written in a "shame.css" (an idea I picked up from the wearedevelopers conf) so we know the person who writes it is aware it's not okay to write such styles.
Personally I don't recommend using !important (not best practice). Adding !important into your css tells the browser that, no matter what happens keep this always.
You might forget at any cost that you have added !important to your css (or) when new developer pitches in, it is hard to figure out the rootcause. This will reduce your productivity.
For this reason I will skip adding this into my css.
Personally, I think you should use !important in your CSS. It is a tool like any other. It has its use cases and if you know when and how, it is very helpful. Most people, however, do it wrong. It's not that it's difficult, people just don't know how to. Since so many people don't know proper CSS architecture, many people just tell you not to use it in order to make your CSS life easier. Imho, it's the wrong way to deal with the symptoms. Why not fix the root problem?
!important with confidence.Example:
.u-borderless {
border: 0 !important;
}
.o-avatar {
border: solid 3px black;
height: 50px;
width: 50px;
margin: 5px;
/* ... */
}
.o-avatar--premium {
border: solid 3px red;
}
The above CSS is ordered as defined by Harry's ITCSS layers and uses BEMIT naming conventions. On a regular site (e.g. a forum with users), you usually want later rules to overwrite earlier ones, so you can have html, like
<article class="o-article__block">
<div class="o-article__user-bit">
<img class="o-avatar" src="/users/12345/avatar.png">
</div>
<div class="o-article__post-bit">
I am a regular user!
</div>
</article>
<article class="o-article__block">
<div class="o-article__user-bit">
<img class="o-avatar o-avatar--premium" src="/users/54321/avatar.png">
</div>
<div class="o-article__post-bit">
I am a premium user!
</div>
</article>
However, you might want to have a utility to remove all border information for special cases. Let's say, there is a BBCode to remove the border from anything. A user \@-mentions another user, which might insert the user's avatar. You usually want to keep all the other CSS of the avatar (which might include mediaqueries, background colors, dimensions, transformations, etc.), but just remove that border. That's the time for a utility-rule, which just removes the border, no matter what the other rules do.
<article class="o-article__block">
<div class="o-article__user-bit">
<img class="o-avatar o-avatar--premium" src="/users/54321/avatar.png">
</div>
<div class="o-article__post-bit">
<a class="o-post-bit__link o-post-bit__mention-user" href="/users/12345">
<img class="o-avatar / u-borderless" src="/users/12345/avatar.png">
</a>
</div>
</article>
Since we use proper CSS architecture, there are no side-effects and the utility rule is even required to have !important so that it can do its magic in all situations.
I hope this example makes it clear why !important is important and how to use it. Also, I hope that you came to understand that proper architecture is imperative and can solve most (if not all) of the CSS problems you can encounter :)
Because, it will override all other occurrence of the property.
Consider this:
.my-class {
width: 400px;
}
.my-class {
width: 100px!important;
}
After this all the elements having class my-class will be forced to scale to width 100 pixels. Which is bad because you may not notice this, which may create a lot of bug(s) which will difficult to find. The style sheet will not work as planned if you do not know what you are doing. It's not always bad to use !important. But you must know where to use it. And in most cases it's better to avoid it with some well planned CSS.
For more you may look more on CSS specificity. This might help.
Hope this helps. :)
Jurgen Landrie
Xalt Co-founder
So, it's still a bit unclear to me. I'm creating a website based on bootstrap but with a lot of custom css. As far as I can see, bootstrap uses !important quite often, so I guess I will have to use it as well?