Comments on: Using the Specificity of :where() as a CSS Reset

By: Deniz Akşimşek

Deniz Akşimşek — Mon, 02 Aug 2021 17:26:53 +0000

Note that browsers might remove the list role from an UL when you style it this way, similar to what they do to table-based layouts. A trick is to apply the no-bullet styling to lists with explicit role=list, globally and exclusively, so that we won't have any inaccessible lists.

ul[role="list"] {
  padding: 0;
  list-style-type: none;
}

By: Marcin

Marcin — Thu, 15 Jul 2021 13:49:29 +0000

If you’ll use BEM methodology and keep your CSS structure flat, you could just write a class to change list’s default styles and you’ll use it whenever you need.

By: Daniel abril

Daniel abril — Wed, 14 Jul 2021 15:09:19 +0000

If u use ul:where([class]), you are adding extra specificity

By: Vishal Bhardwaj

Vishal Bhardwaj — Tue, 13 Jul 2021 02:52:30 +0000

In reply to Konstantin. Ooh! Really

By: John

John — Mon, 12 Jul 2021 23:31:06 +0000

Interesting readability. In the op, it sounds like “where the UL has a class, do xxx, yyy”, whereas the second sounds a bit clunky – “On a UL with a class, do XXX, yyy”. I have to think about the ‘ul:where([class])’ a bit more. Although targeting the ul in this way would make it easier to find in the code, as opposed to seeing ‘:where’ then looking further at the declaration.

By: Konstantin

Konstantin — Mon, 12 Jul 2021 15:34:57 +0000

Nice trick. If I'm not mistaken you can improve readability, a bit, by changing this selector into something like this:

ul:where([class]) {
  padding: 0;
  margin: 0;
  list-style-type: none;
}