Remove all styling with one line of CSS
Tags: css, webdev, tutorial, beginners
Published: 2023-02-19 15:00:00

## Problem
Many times in your work as a frontend developer you had to create components with custom styles according to creative designs. The [default styles](https://www.w3schools.com/cssref/css_default_values.php) of HTML elements like `<button />` or `<a />` are never the styles we want.

The most common solution to this problem is to override the default styles, for example:

```css
.reset {
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	// and so on...
}
```

I used to do that myself until I discovered a much faster and more convenient solution!

## Remove all styling
The `all: unset` CSS property resets all CSS properties to their initial or inherited values. This means that all properties will revert back to the values that were set in the user agent stylesheet or the values that were passed down from the parent element.

By using `all: unset`, you can quickly and easily reset all the styles for a particular element, which can be useful in many situations. For example, you might use it to create a "reset" class that you can apply to an element when you want to remove all styles and start fresh.

### Examples
1. Creating a “reset” class:
```css
.reset {
    all: unset;
}
```
You can then apply this class to an element when you want to remove all its styles:

```html
<div class="reset">This element has had its styles reset.</div>
```

2. Overriding styles applied by JavaScript:
```css
.override {
    all: unset;
    background-color: yellow;
    padding: 10px;
}
```
In this example, you’re using `all: unset` to remove any styles that were previously applied to an element, and then applying your own styles (in this case, a yellow background and 10px padding).

3. Resetting styles for a specific section of a page:
```css
.section {
    all: unset;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: lightgray;
    padding: 20px;
}
```
In this example, you’re using `all: unset` to remove all the styles for a section of a page, and then applying a new set of styles to create a custom layout.

## All values of `all` property
The `all` property is a shorthand property in CSS that sets all of the CSS properties of an element to their `initial` or inherited values. The [all property](https://developer.mozilla.org/en-US/docs/Web/CSS/all) can take four values: `initial`, revert, inherit, and unset.

 * `initial`: sets all properties to their initial values. The initial value of a property is the value defined by the browser’s CSS stylesheet, or the default value defined in the CSS specification if there is no stylesheet. For example, setting the `all` property to `initial` on an element would reset all of its CSS properties to their default values.
 *  `revert`: sets all properties to their inherited values. Inherited values are passed down from a parent element to its children. For example, if you set the `color` property of a parent element to `red`, and then set the `all` property of a child element to `revert`, the child element will inherit the `color` property from its parent and have a color of `red`.
 *  `inherit`: sets all properties to the same values as the parent element. For example, if you set the `color` property of a parent element to `red`, and then set the `all` property of a child element to `inherit`, the child element will have the same `color` property as its parent and have a color of `red`.
 * `unset`: sets all properties to either their  initial values (if they are not inherited) or their inherited values (if they are inherited). This value is similar to `revert`, but it also resets properties to their initial values if they are not inherited. For example, if you set the `color` property of a parent element to `red`, and then set the `all` property of a child element to `unset`, the child element will inherit the `color` property from its parent and have a color of `red`.

```html
<body>
  <div>
    <button class="initial">initial</button>
    <button class="revert">revert</button>
    <button class="inherit">inherit</button>
    <button class="unset">unset</button>
  </div>
  <div>
    <button>unstyled</button>
  </div>
</body>
```

```CSS
body {
  background-color: gray;
  padding: 20px;
}

div {
  display: flex;
  justify-content: center;
  color: white;
  gap: 10px;
}

button {
  width: 200px;
  height: 75px;
  margin: 10px;
  font-size: 18px;
  border: 2px solid black;
}

.initial {
  all: initial;
  background-color: lightgray;
}

.revert {
  all: revert;
  background-color: lightblue;
}

.inherit {
  all: inherit;
  background-color: lightgreen;
}

.unset {
  all: unset;
  background-color: lightpink;
}
```

![Rendered code snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmbbfeauhheajt81l7dl.png)


In summary, you can use the all property to reset all of the CSS properties of an element to their `initial` or inherited values, or to inherit all of the CSS properties from its parent element. The choice of which value to use depends on the specific use case and the desired behavior.


## Caveats
There are some caveats to using `all: unset`, however. First, not all properties are fully reset by `all: unset`. Some properties, such as `display`, `visibility`, and `float`, are reset to their initial values, while others, such as `padding` and `margin`, are not reset at all. Additionally, some properties that are reset by `all: unset` may have unintended consequences, such as resetting the font size or the background color.

### Browser compatibility
The use of the `all` property [is widely supported](https://caniuse.com/?search=all) by modern browsers and is not an issue for most current applications. The only notable exception is Internet Explorer and Opera Mini, which do not support this feature. Nevertheless, it is always advisable to test your code thoroughly in the browsers and devices you plan to target, to ensure that everything works as expected.

## Summary
In summary, `all: unset` can be a useful tool for resetting styles, but it's important to understand its limitations and to use it with caution.

### ⚡️ Action Points
- [see my blog a about Javascript and React](https://www.nikolasbarwicki.com/)
- give a like or write a comment