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.
Top comments (0)