Usando la especificidad de :where() como reinicio de CSS

No sé ustedes, pero escriba estas tres declaraciones muchas veces en mi CSS:

ul {  padding: 0;  margin: 0;  list-style-type: none;}

Podrías gritarme y decirme que puedo ponerlos en mis restablecimientos de CSS. Ojalá pudiera, pero no quiero y te diré por qué en un segundo.

Los agentes de usuario establecen valores para esas propiedades en una lista con un propósito, y ese es hacer que las listas sean más legibles. Estos son los estilos predeterminados en los navegadores Chrome para un ulelemento:

ul {  list-style-type: disc;  margin-block-start: 1em;  margin-block-end: 1em;  margin-inline-start: 0px;  margin-inline-end: 0px;  padding-inline-start: 40px;}

Entonces, sin agregar ninguna clase en HTML o estilo en CSS, los obtendremos de forma gratuita. Eso es algo lindo y no quiero perderlo. Pero agradecería que pudiera hacerle entender al navegador que hay muchas posibilidades de que no quiera esa característica predeterminada en los casos en los que agrega una clase al elemento.

Aquí hay una solución rápida para restablecer un ulelemento que tiene una clase:

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

Ahora no pierdas el estilo predeterminado excepto cuando agregas una clase a mi ulelemento.

El problema

Hay un problema con esta solución. Imaginemos que hay una lista que queremos tener diferente list-style-type, como la siguiente:

ul[class] {  padding: 0;  margin: 0;  list-style-type: none;}.list {  list-style-type: square;}

Esto no funciona ya que ul[class]tiene una mayor especificidad. Ahí es donde nuestra solución falla.

Podríamos agregar más peso a la especificidad del selector:

ul.list {  list-style-type: square; /* Specificity: 0, 1, 1 */}/* or */.sidebar .list {  list-style-type: square; /* Specificity: 0, 2, 0 */}

Si está de acuerdo en agregar más peso al selector, está listo para comenzar. Pero personalmente no estoy de acuerdo con eso. Por ejemplo, no quiero poner el nombre del elemento en mi CSS la mayoría de las veces debido al principio de separación de preocupaciones. O, si está siguiendo la metodología BEM, seguramente surgirán problemas ya que esto entra en conflicto con ella.

Entonces, ¿qué podemos hacer?

La solucion

Hace unos meses, conocí algunos selectores populares, incluidos :is()y :where(). Una cosa acerca de estos dos pseudo selectores funcionales es que pueden cambiar la especificidad, dándonos el poder de anular o aumentar esa especificidad.

La clave :where()es que siempre tiene 0 especificidad. Entonces podemos deshacernos de nuestro problema muy fácilmente de esta manera:

:where(ul[class]) {  list-style: none;}.list {  list-style: square; /* Now this works like a charm! */}

Con el poder de este selector, las bibliotecas pueden brindarnos estilo sin especificidad. Por lo tanto, no habría especificidad con la que competir cuando nosotros, como autores, escribimos CSS.

Manifestación

En la siguiente demostración, puede eliminarla :where()para ver de qué hablamos en acción: