Andy-set-studio / modern-css-reset

A bare-bones CSS reset for modern web development.

Home Page:https://hankchizljaw.com/wrote/a-modern-css-reset/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How do you handle list styles when using `ul[class], ol[class]` in the reset?

paulshryock opened this issue · comments

Re: ul[class], ol[class] from #10

The beauty of this reset is that it's so tiny, taking elements away that are causing problems is really easy. A few people don’t like the ul[class], ol[class] stuff and my response to them each time is basically “don't use them, then”.
-- #10 (comment)

@hankchizljaw, I noticed when including ul[class], ol[class] (which I love in theory), that if I give a list a class name like .list, its styles are still overridden by ul[class], which has higher specificity. So to override the reset, I'd need to use a selector like ul.list. Is this intentional, or how do you handle list styles when using ul[class], ol[class] in the reset?

I get that I could simply "don't use them, then", which is a perfectly suitable solution. But I'm interested to hear what your approach to styling lists is, with this reset. Thanks!

It's pretty straightforward: if a list is to be a list, then I style the semantic element directly:

.my-component ul {
  ...
}

Gotcha. Thanks for clarifying.