Removing list styles without affecting semantics

I love a short and powerfully useful article. This one is especially useful to me, because I account for the problem Manuel is solving in my CSS reset:

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

The reason I have it in the reset is because I’m making a presumption about my and/or my team’s CSS because if there’s a class being added to a list, it almost certainly isn’t going to look like one. It’s a useful hook!

Because of Safari removing list semantics — as referenced in Manuel’s post — we have a policy of “if a list gets a class added, it gets a list role added too”. That policy lives, but I think I’m going to seriously think about removing the above snippet from the reset.

Well, I say that, but I might go back to how I once reset lists:

ul[class],
ol[class] {
  list-style: none;
}

But update it as:

:is(ul, ol)[class] {
  list-style-type: "";
}

I know, I know, attaching this to items with a class is very controversial, but remember, the reset is what works for me and the team, not what works for everyone!

Anyway, read Manuel’s post because it’s fantastic.

Advert