Using the CSS All Property and the Difference Between Initial, Inherit, Revert, and Unset
Tags: css, webdev
Published: 2020-02-03 23:45:55

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:

{% codepen https://codepen.io/LegendOfLuis/pen/VwYooJE %}

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:

```css
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:

```css
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`.

```scss
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.

```scss
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`.


```scss
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?