Some use cases for revert-layer

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 🤔

Advert