Simple and Tiny CSS Reset

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

* {
  all: unset;
  display: revert;
}

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;
}

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;
}

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 🙏

Comments

[petrunov]

The last sentence is a deal-breaker :/

[Mendy Berger]

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