Removing list styles without affecting semantics

Manuel Matuzović solves an age-old problem with dealing with list styles when you don’t want them and I riff about my reset.


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.

Check it out