Your CSS reset should be layered

Cascade layers recently reached the completely arbitrary “baseline widely available” milestone, which means they have been available across all modern browsers for more than 30 months now.

I’ve been a huge advocate of cascade layers since day one. I can’t imagine writing CSS without layers. So obviously I have a lot to say about layers. But today I want to focus only on one point (and it’s worth repeating): Your CSS reset should be placed inside a cascade layer.

This advice is very widely applicable, since pretty much every website uses some kind of CSS reset. You don’t even need to deeply understand how cascade layers work in order to do this.

How?

Wrap everything in your CSS reset with a @layer rule. You can name it anything (or even leave it unnamed).

@layer reset {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }
  /* … */
}

Or if your reset comes from an external file (like Eric Meyer’s website), you can also import it into a layer.

@import "reset.css" layer(reset);

That’s it! You don’t need to change anything else. Your website is now using cascade layers. 🥳

But why?

When you place any styles inside a layer, these styles automatically have lower priority compared to all unlayered styles on the page. Think of it like an !unimportant block. You don’t need to worry about specificity or order of stylesheets at all.

You might already be using the :where pseudo-class to create weak zero-specificity selectors in your CSS reset. I also do this sometimes, mostly as an added safety measure. :where is great for managing specificity within the same layer.

But :where does not provide a guarantee. You might still run into cascade conflicts with other zero-specificity selectors from outside your reset. Whereas if you use a layer, it’s a clear signal to the browser that these styles need to be deprioritized.

Apart from that, there is one simple and important reason to layer your reset: you’ll need to do it anyway if you ever want to use layers anywhere else.

If you don’t layer your reset, it might suddenly start taking precedence over other layered styles. You might not be using @layer today, but wouldn’t it be nice to leave the option open for yourself (or third-party styles, like from a browser extension) in the future?

It’s a low-effort, high-impact thing to do, and there isn’t really a downside¹.

An incomplete list of CSS resets

I can’t find a nice way to close this article, so I’ll leave you with a list of modern CSS resets that you can look at.

I often hear “browser support” cited as a reason to not use cascade layers, which is why I waited 30 months to publish this article. ↩

Your CSS reset should be layered

How?

But why?

An incomplete list of CSS resets

Footnotes