Honestly, I don't really know when to use :where().

// this
:where(header, main, footer) p:hover {
  color: red;
}

// The same as
header p:hover,
main p:hover,
footer p:hover {
  color: red;
}

This changed my mind.

The common mental rule about lists.
If it doesn't have a class, you want bullets.
If it does have a class, remove the bullets.

// List with bullets
<ul>
 <li>dog1</li>
 <li>dog2</li>
 <li>dog3</li>
</ul>

// list without bullets
<ul class="links">
 <li>link1</li>
 <li>link2</li>
 <li>link3</li>
</ul>

// list without bullets AND margin
<ul class="margin">
 <li>link+margin1</li>
 <li>link+margin2</li>
 <li>link+margin3</li>
</ul>


<style>

// automatically remove bullets
ul:where([class]) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.margin {
  /* This applies because .space has higher
  specificity than ul:where([class]) */
  margin: 2rem;
}
</style>

You can probably also use a helper class like no-bullets.

But this method does follow a default top-down approach pattern with CSS that i'm starting to also fall in love with.

Here’s what I didn’t know about :where()