A couple of weeks ago, I was handed a pre-existing project to handle its maintenance and continued support, which has thus become a bigger issue than its worth. A developer on my team came to me and had said "We have to rewrite this. I cannot fix anything without breaking 20 other things." From my experience, developers first desire is to rewrite code that is foreign, old to them, or overcomplicated. So, we had to find the root of the problem in order to find out if we truly needed to go through all that trouble of refactoring a major project for a couple stylistic changes? The developers main reason to complain and want to refactor was justified, at least from an operations perspective: the site used !important 2,033 times. Yes, you read that right.
What is !important?
In short, !important overrides CSS natural specificity, overruling the other possible style selections for that element, making the web pay attention and ignore the others.
Why should I care about CSS Specificity? If it works, it works.
Welll........ does it really work?
In the project I described in the beginning, sales was very happy the project got out in a timely manner, as they were unaware of what was truly happening in the code. One could argue, the site worked. Whats the big deal? Which, they would be right in a way. But months later when developers who did not originally support the code had to make adjustments, it became overly complicated. Specificity gives code consistency by maintaining a standard of weight that is applied to the CSS declaration. When that standard is ignored constantly, the code is no longer consistent, making it hard to maintain, scale, and control. By using !important everywhere, you are pulling the blinds down and ignoring the fire. Eventually, the room you are in will succumb to the fire.
So I should never use !important then?
In tech, I try to avoid the use of the term never. There is possible good done with !important, when applied carefully and sparingly. Some examples of cases where it might be applicable to use:
Overriding style changes that created from JS
Overriding those annoying third-party libraries styles
When it may break multiple things on the website by not using it.
These are just some examples I have seen in my day-to-day job, and it is not a catch-all example listing, each situation is unique. When deciding to use !important, its best to go through all your other options first. Can the structure be adjusted to be reusable? Would it be easier for this element to have its own unique identifier? Can I write this better to be more explanatory and robust? By going down your self imposed list of checkboxes before taking the easy way out, you are sparing future developers from having to put out your fires.
Top comments (0)