Remember these posts? I’ve been holding off on posting #3 because I realized I didn’t have as much as I thought to say about “nudging” with absolute and relative positioning. I would much rather talk about misuse of the !important flag. So, slight change of plan: I’m going to do that first.
Lise, what the hell is !important?
Not, in fact, a philosophical question.
If you’re a hobbyist CSS-slinger working mostly with your own code, you might not have ever heard of the !important flag. It’s the kind of thing that only really becomes relevant in large stylesheets, and usually only those touched by multiple developers.
I still recall, with something less than fondness, the first time I saw it. I was contracting as a front-end developer at a company that really wanted me to also be a designer and a back-end developer (for $30/hour — ha!) At first glance, I thought it was some sort of comment, like “this is important, do not delete.” I had to look it up.
What !important does, if you are unfamiliar, is move a CSS attribute to the head of the cascade.
So what’s the problem with it, Lise?
!important is kind of like a pushy jerk cutting in line, breaking the order which is the core of, you know, cascading style sheets. This is kind of a nuke-like power, and so it is important to use it sparingly.
So you say. Can you give me an example?
Let’s say you’ve just realized, after writing a bunch of CSS already, that you want ALL the <p> tags on your page to have a font-size of 15px, rather than setting it individually. You might write a style like this:
p {
font-size:15px;
}
As it happens, you also have a div called .box that has <p> tags inside of it, and you look to see that *gasp* these paragraphs are not obeying your command. They have a font-size of 14px, even though you said, right there on line 101, that all <p> tags should have a font size of 15px! This must not stand! You “fix” this by applying the important flag:
p {
font-size:15px !important;
}
Whew. Problem solved, right? Your paragraph has a font-size of 15px, everyone is happy.
But… what you may not have realized is that, somewhere lurking in your stylesheet, there’s a style that says:
.box p {
font-size:14px;
}
… which you have just knocked over and taken the lunch of. Someone else — or an earlier version of you — has decided that paragraph tags within .box get the font-size of 14px, and you have just shot that style right in the head.
And? So what, Lise?
What happens if someone wants to override this style for another set of .box p elements? They will need an !important tag to override THAT style.
In a long enough stylesheet, you end up with an escalating war of the !important tags.
If this doesn’t seem that bad to you, imagine working on thousands of lines of CSS, much of it written by other people — which is what I do every day. The temptation in that instance, when your precious style is being overridden by something unwanted higher in the cascade, is to pull the pin on the !important grenade. It’s this use case:
- WHY IS MY FRAGGLE ROCKING CSS NOT WORKING INTERROBANG
- (use !important rule)
- OK, now it’s working
“When Using !important Is the Right Choice,” Chris Coyier, css-tricks.com
And yet, this is exactly the sort of place where you should not do this.
All right, I’m beginning to see. So what should you do instead of applying an !important flag and breaking the cascade we all know and love?
Some options:
– You can change or get rid of the style for .box p. Not always possible, but if you are the only front-end developer working on a project, you can refactor all you like. (Oh, for that kind of freedom!)
– If what you are trying to accomplish is: “All paragraphs have a font size of 16px, except for the ones inside of .box… oh, except for this one example,” the best thing to do is to work with the cascade by making a more specific style. Maybe you want a special sort of .box, a callout box, to have a larger font size. So you set:
<div class="box callout"> </div>
And then set a style of:
.box.callout p {
font-size:16px
}
(This is also an example of modular CSS, which I like).
Cascading makes my head hurt.
Here’s a rule of thumb: the longer the style declaration, the more specific it is. Everytime you add a selector, you make it more specific.
Is there anything !important is good for?
!important is very useful for overriding styles you don’t want that come in from sources you can’t control, like inline styles on social media sharing buttons. Have no compunction about overriding Facebook’s shitty JS-applied inline styles for its Like button. It won’t hurt Zuck’s feelings any.
