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.
Top comments (0)