DEV Community

loading...
Cover image for CSS Tips: Reset Element With all: unset [Simple]

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

nurofsun profile image Nurofsun ・1 min read

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide