Andy-set-studio/modern-css-reset

Proposal: changes to lists

Andy-set-studio opened this issue · 7 comments

Andy-set-studio commented

Right now, the reset removes all padding, margin and list styles from lists that have a class attribute. This is causing problems in the community and it's something I'd like to remedy.

Proposed change

I propose that margin and padding are left as they are. They can be removed on a per-context basis, as required. The immediate removal is my preference and as this thing has exploded in popularity, that really doesn't hold water anymore.

With those removed, I also propose that list styles are only removed when the list has a role of list on it, like so:

<ul role="list"></ul>

This is because, frustratingly, the list-style: none rule can cause problems for assistive technology.

Old CSS

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

New, proposed CSS

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* 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;
}

Comments welcome.

David-Tsui commented

Why not use ::before && zero-width-space?

Andy-set-studio commented

I'm sorry I don't really follow what that would achieve?

robdodson commented

ah! I'm so glad i found this issue as I just encountered this today when trying to use a .stack with a ul with a class in it.

I think this is an ok compromise. It's definitely frustrating that ul[class] ends up having a higher specificity than a single class by itself :(

Andy-set-studio commented

Yeh this is a common context where this is a problem for sure. Did you end up wrapping your stack in another element?

stvnhrlnd commented

Came here looking for this!

For the time being I have wrapped my list in a div 🙂

  • 👍1
AElmoznino commented

Reading about best practices for the list role on MDN, they suggest that you don't need to set role="list" if you're using ol or li.