Cascada — Frontend Classroom

La cascada es el algoritmo central de CSS — de hecho, la “C” de “Cascading Style Sheets” se refiere exactamente a esto. Es el mecanismo con el que el navegador resuelve conflictos: cuando dos o más reglas CSS apuntan al mismo elemento y definen la misma propiedad con valores distintos, la cascada determina cuál gana. Sin este mecanismo, el CSS de un sitio sería un caos impredecible donde el último estilo definido siempre ganaría sin importar de dónde viniera.

Entender la cascada es entender por qué un estilo se aplica y otro no. Es la pregunta que aparece cuando escribís una regla y el elemento no cambia — o cuando el elemento cambia de manera inesperada. La respuesta casi siempre está en uno de los tres factores que la cascada evalúa en orden: el origen de la declaración, su especificidad y su orden de aparición. Si el primer factor desempata la competencia, los siguientes no se evalúan; si no, se pasa al siguiente.

La cascada también explica por qué CSS tiene la reputación de ser “difícil de predecir”: con múltiples hojas de estilo (la del autor, la del navegador, quizás extensiones del usuario), selectores de especificidades variadas y declaraciones dispersas a lo largo de un archivo largo, el orden de evaluación no siempre es obvio. Dominar los tres factores hace que el CSS deje de ser magia y pase a ser un sistema predecible.

Cómo funciona

Factor 1: Origen de la declaración

El primer filtro de la cascada es de dónde viene la declaración. Existen tres orígenes posibles:

User-agent stylesheet (hoja del navegador): los estilos por defecto que cada navegador aplica a los elementos HTML sin ningún CSS propio. El <h1> es grande y negrita, el <a> es azul y subrayado, el <ul> tiene bullets — todo eso viene del user-agent. Cada navegador tiene su propia hoja de user-agent, lo que explica las pequeñas diferencias entre browsers sin CSS propio.
Author stylesheet (hoja del autor — tu CSS): las hojas externas, los bloques <style> y los atributos style="" que vos o tu equipo escribís. Es el origen con más peso en la práctica cotidiana.
User stylesheet (hoja del usuario): algunos navegadores permiten que el usuario instale su propia hoja de estilos personalizada (por accesibilidad, por ejemplo, para aumentar el tamaño de letra). Es raro en la práctica pero existe como parte del modelo.

En el caso normal (sin !important), el orden de prioridad es: user-agent < author < user-declaraciones-normales. El CSS del autor sobreescribe al del navegador, que es por qué podés cambiar los estilos por defecto.

!important invierte el orden de origen: una declaración !important del user-agent o del usuario tiene prioridad sobre las del autor. Esto es intencional: permite que usuarios con necesidades de accesibilidad (como alto contraste) impongan sus preferencias sobre el CSS del sitio. Ver especificidad para el detalle de !important.

Factor 2: Especificidad

Si dos declaraciones tienen el mismo origen (el caso más frecuente: dos reglas en tu propio CSS), la cascada compara la especificidad de sus selectores. La declaración con el selector de mayor especificidad gana, independientemente del orden en el archivo.

p { color: gray; }           /* tipo: especificidad baja */
.destacado { color: navy; }  /* clase: especificidad media */
#titulo { color: teal; }     /* ID: especificidad alta */

Si un <p> tiene class="destacado" y id="titulo", el color será teal — no porque sea la última regla, sino porque #titulo tiene mayor especificidad. Ver especificidad para la fórmula completa de cálculo.

Factor 3: Orden de aparición

Si dos declaraciones tienen el mismo origen y la misma especificidad, el desempate final es el orden en el documento: la declaración que aparece después gana.

p { color: navy; }
p { color: teal; } /* esta gana — aparece después con igual especificidad */

Esto aplica tanto dentro de un mismo archivo como entre múltiples hojas de estilo: si vinculás dos <link> en el <head>, las reglas de la segunda hoja sobreescriben a las de la primera cuando la especificidad es igual.

El orden de aparición también explica por qué la posición de tu <link> en el <head> importa cuando usás librerías CSS (como un framework de componentes) junto con tu CSS propio: si querés que tu CSS sobreescriba al del framework con igual especificidad, tu <link> debe ir después del del framework.

Gotchas conceptuales

La cascada solo aplica cuando hay conflicto. Si dos reglas definen propiedades distintas para el mismo elemento, no hay cascada que resolver — ambas se aplican sin problema. La cascada solo entra en juego cuando dos o más declaraciones definen la misma propiedad para el mismo elemento.
El origen importa antes que la especificidad. Una regla del autor con especificidad bajísima (*) sobreescribe a los estilos del navegador con especificidad alta — porque el origen “author” gana al “user-agent” antes de que se compare la especificidad.
!important no rompe la cascada, la juega diferente. Las declaraciones !important se ordenan en una capa separada dentro de la cascada: primero ganan las !important de mayor origen (user > author > user-agent para !important), y dentro de las !important del mismo origen, la especificidad y el orden aplican igual que siempre.
La herencia no es la cascada. Las propiedades heredadas (como color o font-family) llegan a los elementos hijos porque los heredan, no porque la cascada se aplique a ellos. Si querés sobreescribir un valor heredado, necesitás una regla que apunte al hijo directamente. Ver herencia.
CSS Layers (@layer) agrega un cuarto factor. @layer (Baseline 2022, widely supported) permite agrupar reglas en capas con prioridad explícita, anterior a la especificidad. Es una herramienta poderosa para arquitecturas CSS grandes — no está en el temario de este nivel pero existe como expansión futura.

Vigente / legacy

El algoritmo de la cascada es el núcleo de CSS desde su primera versión y no tiene alternativa legacy. Lo que sí evolucionó: en CSS1/2, los tres factores (origen, especificidad, orden) eran los únicos. CSS3 no modificó el modelo, pero @layer (CSS Cascade 5, 2022) agrega las capas de cascada como una herramienta nueva dentro del mismo algoritmo. Para principiantes, el modelo de tres factores es lo que importa.