También disponible en: English · Português · Français · العربية
Capas de cascada en CSS: qué regla gana y en qué paso
Pega CSS en conflicto y mira qué declaración elige la cascada, y cuál de sus seis pasos lo decidió, que casi nunca es la especificidad.
Qué son las capas de cascada
Una capa de cascada es un cajón con nombre donde metes CSS para poder ordenar grupos enteros de reglas entre sí sin tocar un solo selector. Declaras el orden una vez —@layer reset, components, utilities— y a partir de ahí lo que esté en utilities gana a lo que esté en components, sin importar cómo se comparen los selectores. Es el mecanismo que ganó CSS para el problema que la especificidad nunca estuvo pensada para resolver: que un framework, una biblioteca de componentes y tus propios ajustes dejen de pelearse.
La regla que sorprende a todo el mundo es qué pasa con el CSS que no está en ninguna capa. La especificación dice que toda declaración no asignada a una capa explícita se añade a una capa final implícita, y como las capas posteriores ganan a las anteriores, los estilos sin capa ganan a todas las capas que hayas declarado. No por ser más específicos, ni por venir después en el archivo. Por estar sin capa, que es lo que los pone los últimos en el orden de capas.
La propia especificación lo demuestra. Enseña una regla audio a secas con especificidad 0,0,1, escrita primero, ganando a una regla audio[controls] de 0,1,1 dentro de una capa reset, y dice sin rodeos que las declaraciones sin capa tienen precedencia aunque tengan menos especificidad y vayan antes en el orden de aparición. Ese es el ejemplo por defecto de esta página, y la herramienta señala el paso de las capas como el que lo decidió.
Cómo usarlo
- Pega las reglas que compiten. Se leen las declaraciones de capa, los bloques de capa y las reglas normales. Déjalo en las declaraciones que están de verdad en liza: la cascada resuelve una propiedad cada vez, y la herramienta te avisa si encuentra más de una.
- Lee el paso que lo decidió, no solo la ganadora. El veredicto nombra cuál de los seis pasos separó a las dos primeras. Esa es la parte que importa: si dice paso cuatro, no hay clase que añadas a un selector que cambie el resultado.
- Mira el orden de las capas. Sale en el orden que usa el navegador, con la capa final implícita de los estilos sin capa abajo del todo, que es donde está de verdad. Los botones de ejemplo cubren el caso de la especificación, un !important que sale mal, un orden de capas fijado antes, y una competición que sí llega hasta la especificidad.
Por qué !important debilita una regla sin capa
Esta es la parte que parece un fallo y no lo es. La especificación dice que, al comparar declaraciones de capas distintas, para las normales gana la de la última capa, y para las important gana la de la primera. La importancia invierte el orden de las capas por completo.
Ahora júntalo con la capa final implícita. Una declaración sin capa está la última, lo que la hace la más fuerte entre las normales. Márcala con !important y el orden se da la vuelta: última pasa a ser la más débil, así que la misma regla deja de ganar a todas las capas y pasa a perder contra todas. Poner !important a un ajuste sin capa, que es el reflejo cuando algo no se aplica, es justo el movimiento equivocado; es el segundo botón de ejemplo de esta página.
La nota de la especificación explica por qué esto es coherente y no perverso: sigue la misma lógica que el orden de orígenes, donde los estilos important del autor son más débiles que los important del usuario aunque los normales del autor sean más fuertes que los normales del usuario. La marca !important existe para que quien está más abajo en la pila pueda imponer algo que quien está por encima no pueda anular. Las capas heredan esa lógica, así que la marca significa cede ante la capa base, no gana a toda costa.
La consecuencia práctica conviene decirla claramente. Si usas capas y necesitas que un ajuste gane, ponlo en una capa posterior en vez de echar mano de !important. Y si ya tienes !important repartido por CSS sin capa, adoptar capas va a cambiar cuáles de esas reglas ganan, en una dirección que no se ve leyéndolas.
La especificidad es el quinto paso de seis
La cascada ordena las declaraciones por seis criterios en orden, y se para en el primero que las separe. Primero origen e importancia, luego contexto, luego si la declaración va pegada directamente al elemento, luego las capas, luego la especificidad, y por último el orden de aparición. La especificidad es la quinta. Todo lo que está por encima gana antes de que se mire siquiera el selector.
Eso da la vuelta a cómo se enseña el tema. La especificidad se lleva las calculadoras, las reglas mnemotécnicas en base diez y las discusiones, y decide una competición solo cuando origen, importancia, adjunción y capas han quedado todos en tablas. Este sitio también tiene una calculadora de especificidad, y responde a una pregunta de verdad distinta: te dice cómo se comparan dos selectores, mientras que esta página te dice si esa comparación llega a hacerse.
Las dos páginas comparten un motor justo por eso: los números de especificidad de aquí los calcula el mismo módulo, así que las dos no pueden dar valores distintos para el mismo selector.
Hay otro miembro de la lista que conviene conocer. Los estilos pegados directamente —un atributo style— están en el paso tres, por encima de las capas y por encima de la especificidad. Por eso un estilo en línea gana a un selector de ID sin ser más específico que nada: gana dos pasos antes.
Lo que esto no hace
Lee a propósito una porción pequeña de CSS: declaraciones de capa, bloques de capa y reglas normales. No es un analizador de CSS general, así que una media query, una container query, una regla anidada o un bloque supports se saltan con un aviso en vez de resolverse. Eso mantiene la página centrada en la cascada y no en el análisis, y significa que conviene pegar las reglas que compiten y no una hoja de estilos entera.
Dos de los seis pasos no se aplican, y por el mismo motivo: no hay a qué aplicarlos. El contexto necesita fronteras de shadow tree, que una hoja pegada no tiene. Y dos de los ocho rangos de origen son las declaraciones de transición y de animación, que necesitan algo funcionando de verdad. La tabla completa se enseña con esas filas marcadas, así que la omisión se ve en vez de esconderse.
Tampoco conoce tu documento. La cascada solo compara declaraciones que se aplican al mismo elemento y a la misma propiedad, y si dos selectores casan con el mismo elemento es una pregunta sobre tu HTML. La herramienta da por hecho que todo lo que pegas está en liza; si una regla no casa nunca, no entra en la competición siquiera.
Por último, esto resuelve la cascada, no todo el camino de la hoja de estilos al píxel pintado. La herencia, las palabras clave revert y revert-layer y las transiciones actúan después de elegir ganadora, y aquí no se modela ninguna.
¿Por qué es gratis?
Leer CSS y ordenar declaraciones es trabajo de texto y corre en tu navegador. No hay ningún servidor de por medio, así que no hay nada que cobrar ni cuenta que crear.
No se sube nada y no se guarda nada. Recarga la página y habrá olvidado tu CSS.