The One Word That Can Bend CSS To Your Will

CSS, or “Cascading Style Sheets”, is a computer language that is almost always used in conjunction with HTML and Javascript to, well, *style* a website. Without getting too technical, here is a quick blurb that describes each one:

• “HTML” dictates WHAT information a website displays

• “CSS” dictates HOW a website displays that information

• “JavaScript” dictates how a user might manipulate the information on a given website

  • Not all websites necessarily need to make use of JavaScript, but some of the more complex ones do

For the remainder of this article, we will be sticking to CSS. More specifically, we will be talking about its Specificity, and how to violate it.

First off, what is “Specificity”?

Its really just another word for “Rank”, “Value”, or “Weight”.  Every selector in CSS has a certain  numbered “Specificity”. The higher that number, the more important the selector will be regarded.

Given the HTML example below…

<h5 class=”OutRank”>This paragraph will be Blue</h>

…and the corresponding CSS Block…

h5 { color: Blue; }
h5.OutRank { color: Green; }

The line below will turn out to be green:

This is because the “OutRank” selector has a higher specificity then the simple ‘h4’ selector.

Ok, so it’s a rule system. Rules are good. Why are we talking about “Violating” them?

Because, as with any set of rules, there will come a day/time when you will need to at least bend them, if not outright break them altogether. A good example of this is in the case of a WordPress site where you are injecting some custom CSS code of your own.  There are plenty of plugins that will allow you to do this and, because a great deal of the base WP HTML and CSS is obfuscated from you, even in the backend, it will be very hard for you (but not impossible mind you) to do anything that would cause any terrible breakage to your site that could not be easily reversed. Still,  you won’t always know where the plugin will be placing your code in the grand scheme of it all.

Its not something you will want to get into the habit of doing, and if you code your CSS just right, you should really never need do it. But as anyone with any “Real World” experience in ANYTHING could tell you: There is often a difference, sometimes a rather stark one, between what SHOULD be, and what IS. In this case, the CSS order that you would “swear-on-whomevers-grave” is being adhered to may not necessarily be.

In this particular case, the one word you will need to bend (or break) the specificity of CSS as needed is:

• ‘!important’ (Yes, With the exclamation point).

This term takes the selector/element combination its appended to, and ratchets it up enough to put it outside of the CSS natural order:

Selector { value !important; }

To better put its use into perspective, let’s apply it to a similar example and see what happens:

h5 span{ color: Blue !important; }
h5.OutRank span { color: Green; }

With ‘!important;’ plugged into the ‘h’ selector, the statement below is now no longer lying to you:

But you’re using ‘!important’ though? REALLY?!?!

Now, there are devs in the world who will moan and groan and whine, to the top of their lungs, that ‘!important’ is something that should never…NEVER…EVER…be used inside of CSS code. Granted, for the vast majority of CSS code that you write, you should very much strive for this. However, as in a previous article I wrote, “Never” is one of two words (the other being “Always”) that should be taken with a grain of salt.

To that end, below are two recent articles that go into more depth regarding acceptable, if somewhat extreme, use cases for ‘!important’;

• The Importance of Important, CSS Wizadry

• CSS !important Rule – How to Use it Correctly, appendTo

Thanks for reading.