DEV Community

Mendy Berger
Mendy Berger

Posted on • Updated on

Simple and Tiny CSS Reset

I think that I found my new CSS reset, it's simple, tiny, and elegant

* {
  all: unset;
  display: revert;
}
Enter fullscreen mode Exit fullscreen mode

I first unset all properties, but I need to revert display to the user-agent-stylesheet default otherwise all elements will be displayed, including elements that are not meant to be displayed like style, script, title, etc.

Making it just a little better

* {
    all: unset;
    display: revert;
    box-sizing: border-box;
}
[default-styles] {
    all: revert;
}
Enter fullscreen mode Exit fullscreen mode

Why box-sizing: border-box;?

I just think that its easier to think of the element with its border as a block instead of thinking of just its content as a block.

Why [default-styles]?

You can add this attribute "default-styles" to any element that you want to revert the styles back to the default.
This is useful for elements that have default styles that might be useful in some cases, but in most cases, it would end up being overridden, like button, input, select, etc.

Fixing SVG problems

The all CSS property includes some SVG properties, and unsetting them means losing most of the power of SVG, so we need to exclude all SVG elements, this can be done easily by excluding the SVG namespace

@namespace svg "http://www.w3.org/2000/svg";
:not(svg|*) {
    all: unset;
    display: revert;
    box-sizing: border-box;
}
[default-styles] {
    all: revert;
}
Enter fullscreen mode Exit fullscreen mode

Problem with custom-elements

This will override all styles in :host, making this approach hard to recommend when working with web components.

Please share your thoughts in the comments section, thanks 🙏

Top comments (2)

Collapse
 
petrunov profile image
petrunov

The last sentence is a deal-breaker :/

Collapse
 
mendyberger profile image
Mendy Berger

Right, I'm using custom elements quite a lot and I can't use this in those cases :(