CSS Tips: Reset Element With all: unset [Simple]

You will always facing this problem if you write the CSS code by yourself, no CSS framework, and any CSS/SASS/SCSS library.

Yeah, some elements has their default behavior/appearance thus we can decide by ourself

No Default Style, Please Reset it!

Reset this element then make new style or remain the default.

But, probably I would like to resetting this element, and make my own style.

Button Element

for example, we have button element and the default style looks like quite ugly.

so I have to restyling this element, but before I do that.

I must reset the default appearance.

button {
  background: none;
  padding: 0px;
  margin: 0px;
  border: none;
  outline: none;
}

You know? There's more simple way to reach out something as above with only one declaration, yeah with all: unset;

Use all: unset to Reset Elements

Look at this code below, you might be surprised with this magic.

button {
  all: unset;
}

The Result

You can compare both the result, button with class old is with old way to reset element, and button with class simple is with new/simple way to reset element.

I think, the result is the same, but for more information which browsers supported all: unset; declaration you can take a look on canise

Thanks.