Some use cases for revert-layer

A damn useful run-down of revert-layer — a more useful CSS revert tool — by Mayank


Every now and then, I stumble across a CSS article that blows my goddamn mind and this is one of them. I’ll be honest, I’m only recently starting to see the true benefit of CSS layers recently, but I think this article is gonna radicalise me into getting really into them.

My favourite part is the bit about resetting a reset’s styles.

.prose :is(ul, ol) {
    @layer reset {
        list-style: revert-layer;
    }
}

Keeping list styles in prose is something I’ve been tackling by targeting lists in my reset like this:

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

I think I’m gonna have to lean into layers more now though and further simplify the reset 🤔

Check it out