Using the CSS All Property and the Difference Between Initial, Inherit, Revert, and Unset

There have been a few situations when I have been working with a client to style a particular component for a website, but I need to reuse a class name which is already being styled differently. When code splitting is not an option, it can lead to some styles being inherited from other sources which I need to override for my component. Let's say we have a button that is styled with Materialize, but I need to create a totally different looking button:

Materialize buttons have a lot of styles applied to them, and while the best way to remove them would be to just use a different class, there may be a situation where you don't have that option and have to choose between adjusting every property line by line or using the all property. The all property will allow you to turn several lines of resets:

color: revert;
background: revert;
transition: initial;
cursor: initial;
text-decoration: revert;
text-align: initial;
letter-spacing: initial;
font-size: revert;
outline: initial;
border: initial;
border-radius: initial;
display: initial;
line-height: initial;
padding: initial;
text-transform: initial;
vertical-align: initial;
box-shadow: initial;

Into a single line of code:

all: revert;

The all property will reset the value of all of the properties to the value you give it. It currently accepts four values, initial, inherit, revert, and unset. These values can also be used as a value for any other CSS property in order to reset it to a particular state, but if you do need to reset everything, you can just use all.

Just to reiterate, all is probably not the best way to remove styles from an element. The more efficient way would be to update your scopes so that styles are not overridden or to use code splitting. I would only suggest using all if you are restricted in how styles are applied and in what order.

So what do initial, inherit, revert, and unset actually do?

They are all ways to reset a property, but in different perspectives.

• initial: This will change the value to be the default value of a particular property, regardless of the element. display: initial renders to display: inline because that is the default value of the display property. It does not matter whether you are setting the value of a block element like a div or an inline element like a span.

a {
  color: initial; //Value of the user-agent, typically black
  text-decoration: initial; //Value of the user-agent, typically none
}

• Inherit: This will act as though the property was never set on that element, meaning the element will take on the styles of wherever it would have been inherited from. If the parent element has color: red, and you set color: inherit on a child element, it too will have the color: red inherited from the parent as expected.

a {
  color: inherit; //Value of the parent element
  text-decoration: inherit; //Value of the parent element
}

• revert: This will reset the property to a cascade level above it. If this value is defined in the user origin level, it will reset the style to the user-agent level, and if it is defined in the author level, it will reset to the user level. For example, the user-agent style for the <a> tag is usually blue with an underline in most browsers, while the user level would be a style that was added in by the user through a custom stylesheet. Stylesheets on a website are typically in the author origin level. So if you wanted to the reset anchor links to the blue that is defined by browsers, you can use color: revert.

a {
  color: revert; //Value of the origin level, i.e. user-agent would be #0000EE
  text-decoration: revert; //Value of the origin level, i.e. user-agent would be underline
}

• unset: This resets a property to its inherited value if it inherits from its parent, otherwise it will be set to its initial value. This essentially acts as an inherit, but if the property is not set on the parent element, it will act as an initial instead.

CSS are a powerful tool that can help you clear up some unwanted styles, and while the best thing to do is avoid overlapping stylesheets, these can be handy for those situations where you can't avoid it. In what situations have you needed to use the all property or any of the other CSS reset options?