También disponible en Inglés
El problema
Un estilo base se escribe para ser silencioso. Algo destinado a establecer un valor por defecto sensato y luego apartarse en el momento en que aparezca algo más especĂfico para sobrescribirlo.
No se aparta. El estilo propio de un componente, escrito más tarde con lo que parece un selector perfectamente razonable, pierde contra Ă©l de todos modos. El desarrollador que escribiĂł el estilo base nunca quiso que ganara. GanĂł de todos modos, porque nada en la forma en que fue escrito declarĂł jamás deberĂa perder siempre.
Por qué existe el problema
La mayorĂa de los selectores acumulan especificidad como un efecto secundario de la forma en que resultan estar escritos, no como una elecciĂłn deliberada que alguien haya tomado a propĂłsito. :is() es un buen ejemplo de esto en la práctica: genuinamente Ăştil para agrupar varios selectores en una sola regla, pero asume silenciosamente la especificidad de su argumento más especĂfico. Un selector elegido por conveniencia puede convertirse en un peso pesado sin que nadie pretenda ese resultado.
Nada en el CSS ordinario permite a un autor decir, directamente, «agrupa estos, pero mantĂ©n el resultado en cero». AsĂ que los valores por defecto se vuelven silenciosamente más poderosos de lo que se pretendĂa, y los mismos problemas de sobrescritura mencionados anteriormente en esta serie resurgen aquĂ con una nueva forma; no porque alguien haya sido descuidado, sino porque la especificidad se acumulaba como un subproducto en lugar de declararse como una decisiĂłn.
El primer principio
La especificidad de cero no es una ausencia de poder. Es una intención declarada: esta regla debe ser siempre lo más fácil de sobrescribir en la base de código.
Esa no es una regla más débil. Es una regla con un rol permanente y declarado; la misma idea de declarado, no calculado de una fase anterior, que ahora vive dentro de un solo selector en lugar de un sistema de ordenamiento completo. Elegir especificidad cero a propósito resulta ser un movimiento más sofisticado que el manejo cuidadoso de la especificidad de forma ascendente.
DemostraciĂłn del principio
:is(h1, h2, h3) { margin-block: 0; }
Pistas de especificidad segĂşn los argumentos: :is() recoge especificidad real de sus argumentos; esta regla aĂşn puede competir con un selector de clase y, dependiendo de quĂ© más estĂ© anidado dentro, a veces ganar cuando no deberĂa.
:where(h1, h2, h3) { margin-block: 0; }
La alternativa con :where() aporta cero especificidad, independientemente de lo que se agrupe dentro de ella. Una sola clase supera esto siempre, por diseño; no porque el selector sea débil, sino porque fue escrito para perder siempre a propósito.
quell como caso de estudio
quell usa :where() en toda su capa base especĂficamente para que nada destinado a ser un valor por defecto silencioso pueda superar accidentalmente a algo destinado a sobrescribirlo.
La lección más amplia
La Fase Dos cierra aquĂ, y vale la pena nombrar lo que ha sido cierto en estos cuatro artĂculos: Capas. El orden de resoluciĂłn completo. Exclusiones deliberadas. Ahora, especificidad cero. Cada uno tiene la misma forma subyacente: la precedencia, el alcance y el poder son más fuertes cuando se declaran a propĂłsito, no cuando se dejan acumular como un efecto secundario de cĂłmo se escribiĂł algo.
Esa es todo el cambio que ha venido realizando esta fase, un mecanismo a la vez: de una cascada que la gente gestionaba de forma defensiva, regla por regla, a una cascada contra la que la gente realmente puede diseñar, a propósito y de antemano.
