Using !important keyword you can give more weight to a CSS declaration. You can do this not just in your stylesheets but the inline styles too, and if you do so, you make some mistake.
The !important declaration introduced in the CSS1 specification with the goal to override the styles from both authors and users. For first the developer style’s weight was more massive than the user’s so we can get the control from the user. As you guessed this is a non-accessible way, so it was changed in the CSS2 specification reversely.
The declarations with !important keyword has the nature that it doesn’t care about the specificity or the cascading. The behavior depends on the context, but mostly anything can be overwritten with !important.
If you read about CSS architecture, you will see that nobody suggest using !important in your code. Applying the keyword, you make week code; this is mostly true because you entirely kill the cascading and the specificity of that element. If you use it to override the declaration in a more complex code anybody guarantees it that it will be a nightmare.
So knowing this what for we can use this keyword? As you guessed, I think this is a handy tool, but we must use it with caution. Let’s check out some possible use case but first some basic CSS.
Give your project a solid foundation.
The CSS Specificity and Cascading
About the specificity we mean the more precise selector like in the following example:
.entry-content {
color: red;
}
.entry-content p {
color: black;
}
The latest declaration is more concrete because we selected the <p> elements inside the .entry-content thus the <p> tags will has black color.
The least specific selectors are the type selectors (e.g., h1, p, span, div) followed by the class selectors (e.g., .entry-content), the attribute selectors (e.g.,[type=”radio”]) and the pseudo-classes (e.g., :hover, :focus). The strongest ones the ID selectors (e.g., #main).
About the cascading, we mean the natural cascading flow of the CSS. Where is the declaration in the order chain? The more it is at the end of the chain, the more weight it has. The order is the following: declarations from the browser, then from the user, then from the author, then from the author with !important, then from the user with !important. If the browser has a default style for the heading tags you as the author easily can override them with the lowest specificity type selectors. And we still not mentioned the inheritance which also appear in a lot of cases.
Of course, this cascading work too in your stylesheets: the later declaration with the same specificity will beat the previous.
Understanding the specificity and the cascading could be more complicated. For more info check out the links from MDN!
So What We Can Use for?
It’s sure that the !important had a bad reputation because sometimes for the lazy developer – mostly me – its more comfortable to override everything with this non-elegant way than dig through the code and solve the real problem – which is usually my bad architecture.
Debugging Your Code
The most obvious way to use this keyword to debug your code usually in your browser. Using !important temporarily in your code can eliminate some conflict and can help us to isolate the problem. In Chrome, you can also add inline-styles which can override the author style’s essential values too.
It is handy for quick fixes and just for research purposes. If you need this you probably should refactor some of your code.
Hide elements
There are a various way to hide something from the normal screen users but mostly true that if you want to make sure the result the !important can be useful. Certainly, if you work on your project you know if is it necessary or not.
.visually-hidden {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
}
In this example, you force the element to set position to absolute despite the cascading or specificity. Note that there can be still some cases where this is not enough, but that is undoubtedly lousy practice in the long term.
Defensive CSS
Defensive CSS is a concept where you the developer try to perform sure that the user can make just the least amount of mistake during the content editing. This can mean every trivial example like the display property’s block value on the images:
.entry-content img {
display: block !important;
}
Using this code you can make sure that the editor can’t make the images inline or inline-block – by mistake – even if they can.
To Hack the Glorious WYSIWYG Editors
In WordPress, the default WYSIWYG editor is TinyMCE which is I think not the worst editor. One of its helpful attributes is not using inline styles like CKEditor (I believe that you can turn it off, but not sure).
When you edit content in CKEditor, there could be inline-styles which weight more than our author ones. So what can we do? Using !important and control the needed behavior.
Utility Classes
Most of the utility classes have low specificity usually with just one class. It can be tricky using them inside of a container element reference like the following:
.btn{
display: inline-block;
background: #3590f1;
padding: 0.7em 1.6em;
border-radius: 2px;
font-size: 1rem;
font-weight: 700;
color: #fff;
text-transform: uppercase;
text-decoration: none;
&:hover,
&:focus {
background: #5adba0;
}
}
.entry-content a {
text-decoration: underline;
color: #3590f1;
}
Though our .btn class is fine as we wrote it its specificity is low so the simple second declaration can override some of its properties (color and text-decoration). You should write light selector, but you still get some problem.
You can solve this problem using !important like in this pen:
See the Pen CSS !important with Utility Classes by Adam Laki (@adamlaki) on CodePen.
It is true that after this you also have to use this technique in the modifiers or the pseudo-states too.
BEM Method
BEM is that method which builds on the top of the low specificity, and sometimes it can cause some unpleasant moments. Almost all of the selectors has one class. I don’t know how many times I needed to refactor my code produced by this technique. Of course, you have several solutions, but next time maybe you can use !important too.
