One of my pet peeves when utilizing a CSS boilerplate framework like Bootstrap, is that it can completely take over elements in ways that I may want to back out of later. Bootstrap isn’t the worst offender of this these days, because for the most part you have to apply specific styles to an element, but it still happens more often than I care to count.

Lately I’ve been utilizing the “revert” css property and it’s saved me a bunch of time trying to work out what a default value should be. It’s a somewhat lesser known feature, but certainly one that I think people could be using more often.

Utilizing CSS Revert

Let’s take a simple example, whereby I override the CSS of all buttons within my application. Something like so :

button {
  background-color:blue;
  color:white;
  border-radius:5px;
  border-color:blue;
}

What happens if I want to style a button with a class of “plain-button” to look like a default button. Basically, I want the button to “remove” all CSS styles. In the past I might try and simply overlay CSS on top to override things yet again. Something like so :

button.plain-button {
  background-color:transparent;
  color:black;
  border-radius:0px;
  border-color:gray;
}

This code probably looks correct on the surface but it’s actually wrong for a couple of reasons :

• I’ve had to guess the default CSS values (of which they are wrong by the way!)
• Default CSS values actually may look different per browser or OS (Namely on Mac devices, default buttons look completely different!)
• Sometimes setting CSS values has unintended side effects, namely adding borders sometimes removes the border shadow in some browsers etc.

All of this boils down to us not *really* reverting the CSS as much as we are trying to work out the values to make it go back to looking like a plain button.

Instead, we can do something like so :

button.plain-button {
  background-color:revert;
  color:revert;
  border-radius:revert;
  border-color:revert;
}

Revert allows you to reset a CSS value back to the browser specific style for that property, for that element. This means you no longer have to “guess” the style but can simply say “Whatever the browser default is, use that”.

Revert All Property

Resetting each property can be cumbersome. And it doesn’t stop another developer adding additional properties to our root element yet again. But there is a handy shorthand for saying “Reset everything”. It looks like so  :

button.plain-button {
    all:revert;
}

The “all” property does what it says on the tin. It takes every possibly CSS property and reverts them all to our browser specific stylesheet. You can even then start styling something from scratch below :

button.plain-button {
    all:revert;
    color:gray; //OK revert all, except make the text gray. 
}

Revert vs Initial

You may be confused about the usage of “Revert” given there is another value you probably have seen called “Initial”. They work in similar ways, but there is a large difference to the output .

Initial works by resetting CSS values to what the W3C spec says for that particular element. This typically means styling elements in ways you did not expect. When it comes to buttons, this is especially true because the W3C spec does not define a style for buttons, and therefore if you used “initial”, it means removing all browser and OS specific styling on that button (Which you may want by the way!). Another tricky one is that the W3C spec defines that the default display value for a div is “inline”, not “block”, again rather confusing as every browser defaults a div to be displayed as a block element!

Revert instead resets the CSS values to what your browser thinks is the default. Which often means styling things in a way that you’ve probably come to expect, and as such, this is definitely the one I use more often.

👋 Hey, I'm Wade

Wade is a full-stack developer that loves writing and explaining complex topics. He is an expert in Angular JS and was the owner of tutorialsforangular.com which was acquired by Upmostly in July 2022.