CSS revert-layer

The CSS revert-layer keyword allows you to reset a property’s value to that of the previous cascade layer. I wouldn’t have understood that sentence this morning, so I’ll break it down.

revert-layer is a keyword you can use for a property’s value, like inherit, initial, unset, or revert. Contrast those with other values like 8px, 1rem, or 100%. You can even apply these to all properties at once with the all shorthand property:

I think it’s helpful to understand the revert keyword before understanding revert-layer. When you use revert, the property will fall back to its value in the previous style origin. What’s a style origin?

Style origins

There are three style origins: user agent origin (i.e. browser defaults), user origin (does anyone do that anymore?), and author origin (i.e. styles written by you the developer). So in most cases revert probably falls back to a browser default, meaning it’s often the same result as using unset.

revert-layer, on the other hand, allows you to fall back to the previous author origin cascade layer. But what’s a cascade layer?

Cascade layers

CSS cascade layers define the prioritization of styles from different sources. Within each layer, specificity rules apply. You’ve probably seen the !important keyword, for example, which allows a declaration to jump up the priority ladder to a higher cascade layer. And you probably know intuitively that author origin styles are in a higher priority cascade layer than user agent styles. You can explicitly create cascade layers using @layer syntax to separate the priority of different style sources in your app.

I almost used this in production

I came across revert-layer while working on ide.membrane.io today. We have a global stylesheet used for auth pages, and we don’t want those styles to apply to the root IDE page (which is a vscode fork with its own styles). When redirecting to the IDE from an auth page, though, that global stylesheet has already loaded. So I thought this would be a perfect case to write something like:

It didn’t work as smoothly as I’d hoped in this case (the vscode codebase has many, many CSS files plus inline HTML and JS-controlled styles, so it was tricky to figure out exactly what’s being applied, and visually testing the whole surface of the editor is next to impossible). I ended up using Next.js Route Groups with different layouts instead, but hopefully the revert-layer side quest was worthwhile.