Beef-Up Your Web Design Skills: Avoid “!important” at all Costs

Write your CSS this way instead.

Nothing makes my eye twitch more than when I see !important scattered throughout the CSS codebase. Recklessly adding !important to your CSS can make your code hard to manage.

The !important CSS rule is typically used to override previous styling rules. Once this is added, you’ll need to use another !important if you need to override it.

Imagine you’re now coming in to maintain this code. You write some CSS only to realize it’s not working due to an !important rule that’s been applied somewhere. Your next step would be to either:

• Remove the !important and update the code so that everything looks as expected without it
• Add another !important for what you’re trying to do

Frequent uses of !importantcan result in a chaotic and convoluted CSS codebase. Here’s what you should do instead to make maintaining the code easier for the next developer.

Increase Specificity

Are you familiar with CSS specificity? I certainly wasn’t when I first started my web developer career. I was self-taught and ended up coming across it later.

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

Learn more: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Here is a list of selector types from the highest specificity to the lowest:

1. ID selectors — (e.g. #idname).
2. Class selectors, attribute selectors, and pseudo-class selectors:
   a) Class selectors — (e.g., .example).
   b) Attribute selectors — (e.g., [type="radio"]).
   c) Pseudo-class selectors — (e.g., :hover).
3. Type selectors — (e.g., h1).

Consider Atomic CSS

Now that I’ve mentioned specificity, it’s worth noting that we want to avoid constantly creating too high specificity that we always need to override. Thierry Koblentz first coined the term Atomic CSS in his article titled “Challenging CSS Best Practices.” It works by mapping classes to a single style so that each class serves as a building block instead of contextual CSS.

It’s the difference between:

// specificity too high and hard to maintain
.button.red { 
    display: inline-block;
    height: 1.75rem;
    background-color: red
}
.modal .button {
    position: absolute;
    bottom: 2rem;
}

(HTML)

<div class="modal">
  <button type="button" class="button red">Button</button>
</div>

and

.display-ib {
  display: inline-block;
}
.height-2 {
  height: 2rem;
}
.bg-red {
  background-color: red
}
.absolute {
  position: absolute;
}
.left-50 {
  left: 50%;
}
.translateX-50 {
  transform: translateX(-50%);
}
.bottom-2 {
  bottom: 2rem;
}

(HTML)

<div class="modal">
  <button type="button" class="display-ib height-2 bg-red absolute left-50 translateX-50 bottom-2">Button</button>
</div>

You may be thinking, “Why in the world would I want to create that many classes??” I’ve found that these many, single functional classes are beneficial in large projects.

Pros for Atomic CSS

• Minimize bloat — there is less need to add more styles to your stylesheet. With the atomic CSS classes, you’d be able to build out whole components without the need to add new CSS styles for the new component.
• Code reuse — you can use the same CSS classes across many components.
• Reduced specificity conflicts — the need for !important is reduced due to fewer specificity conflicts since all atomic classes would use a low specificity.

Atomic CSS Libraries

You can start using Atomic CSS with one of the following free libraries listed below.

• Tachyons CSS — https://tachyons.io/
• Tailwind CSS — https://tailwindcss.com/
• Bulma — https://bulma.io/

Consider BEM

BEM stands for Block, Element, Modifier and is a naming convention for CSS classes. These classes are usually formed to look like: .block__element--modifier

Example:

/* the block component */
.modal {}
/* the block component with a modifier that changes the style */
.modal--yellow {}
/* the element that relies on the block */
.modal__button {}
/* the element with a modifier */
.modal__button--red

(HTML)

<div class="modal modal--yellow">
  <button type="button" class="modal__button--red">Button</button>
</div>

Pros for BEM

• Standard naming convention — will help other developers have a common understanding of how the CSS classes should be named, thus adding to maintainability. At a glance, you’re able to determine the meaning of the class name and which components rely on another.
• Reduced specificity conflicts — this is another methodology that aims to reduce specificity conflicts by utilizing low specificity CSS classes.

Conclusion

Consider the options laid out in this article before invoking the !important rule. It does have its place in CSS writing, such as in HTML newsletters and overriding inline styles. However, I wrote this article because I’ve seen it become a burden more often than not. Using !important too often in your CSS codebase can result in code that’s too difficult to maintain.

Consider the following when you need to override styles:

• Increase specificity — determine what is the suitable specificity and use it to override the necessary styles
• Beware of creating CSS selectors with too high specificity. Consider the following methodologies in your CSS codebase:
  - Atomic CSS
  - BEM

You’ll thank yourself later :).

Further Reading

1. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
2. https://specifishity.com/
3. https://blog.hubspot.com/website/css-important
4. https://www.smashingmagazine.com/2013/10/challenging-css-best-practices-atomic-approach/
5. https://www.sitepoint.com/css-architecture-block-element-modifier-bem-atomic-css/
6. https://www.toptal.com/css/introduction-to-bem-methodology