{"id":1886,"date":"2016-08-29T18:15:29","date_gmt":"2016-08-29T12:45:29","guid":{"rendered":"http:\/\/www.nispaara.com\/blogs\/?p=1886"},"modified":"2019-06-03T15:30:48","modified_gmt":"2019-06-03T10:00:48","slug":"the-importance-of-important-forcing-immutability-in-css","status":"publish","type":"post","link":"https:\/\/www.nispaara.com\/blog\/the-importance-of-important-forcing-immutability-in-css\/","title":{"rendered":"The Importance of !important: Forcing Immutability in CSS"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]As with most things, there are exceptional circumstances in which following the rules would actually be a pretty bad idea, and it\u2019s usually context and discretion that inform our decision to break them.<\/p>\n

For example, the speed limit is 70mph (unfortunately we do still use miles). You are not allowed to drive faster than 70mph. It\u2019s illegal. You just can\u2019t do it.<\/p>\n

However\u2026\u00a0if your friend is dying in the back seat and you\u2019re trying to get them to hospital before they bleed out everywhere, by all means, drive faster than 70mph!<\/p>\n

In 90% of situations, the rule is a good one. By and large, we\u2019re much better off following it than not following it. But there will definitely be situations that fall outside of that 90%.<\/p>\n

Similarly, as we mature as developers, we need to recognise that the rules we live by will also have exceptions, given the correct circumstances.<\/p>\n

Once developers start to grow and learn that things aren\u2019t always that black and white, we can get a little more detailed and nuanced, and throw in some caveats.<\/p>\n

But before we look at the exceptions to the rule, let\u2019s look at the rule itself.<\/p>\n

Never Use\u00a0!important\u00a0in Anger<\/strong>
\nUsing\u00a0!important\u00a0reactively is the most heavy-handed, nuclear,\u00a0all-the-way-up-to-11option we have at our disposal. Using\u00a0!important\u00a0to get yourself out of a problem with some existing CSS is most certainly inadvisable. It will have knock-on effects whose only solution will be to use another\u00a0!important, then another, then another, ad infinitum.<\/p>\n

Do not use\u00a0!important\u00a0reactively. Do not use\u00a0!important\u00a0to solve a specificity issue.<\/p>\n

Do not use\u00a0!important\u00a0in anger.<\/p>\n

Hacking Specificity<\/strong>
\nIf we do find ourselves in a situation where existing styles are overriding our current work, we have much safer methods of altering their specificity.<\/p>\n

If we need to bump the specificity of a single class up, we can chain it with itself (e.g..btn.btn {}). If we need to bring the specificity of an ID down, we can rewrite it as an attribute selector (e.g.\u00a0[id=”header”] {}).<\/p>\n

Most of the time, there is no need to turn to an\u00a0!important.<\/p>\n

Right. When can we use it?<\/p>\n

Forcing Immutability with\u00a0!important<\/strong>
\nThe idea of immutability is one that really fascinates. The idea that something can never be changed after it\u2019s been created sounds amazing! How much more confidence would we have if we knew that something always looked and behaved the same no matter where we put it?<\/p>\n

This is typically quite hard to achieve in CSS because it\u2019s designed around an inheritance-based model which makes heavy use of mutations. But, there is a specific type of rule that can actually make great use of immutability, and do so very safely: utility classes.<\/p>\n

Utility classes are tiny little classes that carry out very specific, very explicit jobs. Classes like:<\/p>\n

.u-text-center { text-align: center; }
\n.u-float-left { float: left; }
\n.u-text-large { font-size: 48px; }<\/p>\n

They all begin with a\u00a0u-\u00a0in order to tell the next developer\u00a0what their purpose is, and they all carry out just one simple piece of styling.<\/p>\n

All of the declarations in the rulesets above are defined without an\u00a0!important\u00a0on them, but they really, really ought to be. Here\u2019s why:<\/p>\n

By using a class like\u00a0u-text-center\u00a0in our HTML, we are making a definite, clear, unambiguous decision that we want some text to be centrally aligned. There is absolutely no question about that. However, the selector\u00a0.u-text-center {}\u00a0has a relatively low specificity, so there\u2019s a chance that another selector could accidentally override it.<\/p>\n

Force utility classes to be immutable by applying\u00a0!important\u00a0to their declarations.<\/strong>
\nOf course, in a perfect world (whatever that is), we wouldn\u2019t have a selector like\u00a0.sub-content h2 {}\u00a0even present in our CSS, but it\u2019s inevitable that.<\/p>\n