Cascada CSS
Aprende qué es la cascada en CSS, cómo influyen el origen de los estilos, la especificidad y el orden de aparición, y cómo dominar estas reglas para controlar tu diseño web con precisión.
La cascada es uno de los conceptos fundamentales de CSS. Explica cómo el navegador decide qué estilos aplicar a un elemento cuando existen múltiples reglas que lo afectan.
Entender la cascada te ayudará a escribir CSS más eficiente, evitar conflictos y tener un mayor control sobre el diseño de tus proyectos.
El nombre “cascada” en CSS se refiere a cómo las reglas “caen” unas sobre otras, como si fueran una cascada literal de estilos que el navegador va evaluando y superponiendo hasta decidir cuál aplicar.
La metáfora viene de que:
- Hay múltiples fuentes de estilos (navegador, usuario, autor…).
- Algunas reglas tienen más “peso” que otras (por especificidad o !important),
- Y si hay conflicto, las más débiles “caen” y son sobreescritas por las más fuertes.
Igual que en una cascada de agua, donde las capas superiores afectan a las inferiores, en CSS, las capas de estilos se van evaluando en orden hasta que una “sobrevive” y se aplica.
No se trata solo del orden vertical en el archivo CSS, sino de una jerarquía de prioridad entre capas. Por eso se llama Cascading Style Sheets.
¿Qué es la Cascada?
El navegador usa la cascada y sigue un orden de prioridad para resolver los conflictos, basándose en tres factores principales:
- El origen del estilo: Dónde se definió el estilo (por ejemplo, estilos del navegador, del autor o del usuario).
- La especificidad: Qué tan "específica" es la regla CSS.
- El orden de aparición: La última regla que se encuentra, en caso de empate, gana.
Origen de los estilos
CSS puede provenir de diferentes orígenes, que se aplican en el siguiente orden de prioridad (de menor a mayor):
- Estilos por defecto del navegador: Los navegadores aplican un estilo básico a todos los elementos.
- Estilos del autor: Son los estilos que escribimos como desarrolladores en archivos externos, internos o en línea.
-
Estilos
!important: Las reglas que contienen!importanttienen la máxima prioridad.
<!-- index.html -->
<style>
h1 {
color: purple;
}
</style>
<h1 style="color: tomato;">This is FrontendLeap</h1>
h1 {
color: goldenrod;
}
El navegador aplica primero los estilos más débiles (del navegador) y va sobrescribiendo con los más fuertes, siguiendo la jerarquía anterior.
Los estilos con
!importantsobrescriben cualquier otro estilo, independientemente del orden o la especificidad.
Especificidad
La especificidad determina qué regla tiene mayor peso cuando varias coinciden en un mismo elemento.
Las reglas con mayor especificidad tienen prioridad sobre las demás.
Recordando la puntuación de especificidad
-
Inline styles: Los estilos definidos directamente en el atributo
styletienen la especificidad más alta. -
IDs: Un selector con un
id(#miElemento) tiene más peso que un selector de clase. -
Clases, atributos y pseudoclases: Seleccionadores como
.miClase,[type="text"]o:hovertienen un peso medio. -
Elementos y pseudoelementos: Los selectores de elementos (
div,p) y pseudoelementos (::before,::after) tienen la menor especificidad.
Ejemplo de especificidad:
<div id="main" class="box">Hello World</div>
div { color: blue; } /* Especificidad: 0,0,0,1 */
.box { color: green; } /* Especificidad: 0,0,1,0 */
#main { color: red; } /* Especificidad: 0,1,0,0 */
La regla con mayor especificidad (#main) se aplica, y el texto será rojo.
Orden de aparición
Cuando dos reglas tienen la misma especificidad, el navegador aplica la que aparece más tarde en el código.
Ejemplo del orden de aparición:
<!-- index.html -->
<p class="note">Which color will win?</p>
/* Both selectors have same specificity (class = 0,0,1,0) */
/* First declaration */
.note {
color: blue;
}
/* Second declaration (same specificity, appears later) */
.note {
color: purple;
}
En este caso, el texto será púpura, ya que la segunda regla sobrescribe a la primera.
La propiedad !important
El uso de !important fuerza la aplicación de una regla, ignorando tanto la especificidad como el orden de aparición.
Ejemplo de !important:
<div class="box" id="main">Hello World</div>
#main { color: blue; }
.box { color: red !important; }
En este caso, el texto será azul, incluso si la regla #main tiene menos prioridad por orden de aparición o especificidad.
¿Cuándo usar !important?
- Úsalo con cuidado. Forzar estilos con
!importantpuede hacer que el código sea difícil de mantener y depurar. - Es preferible aumentar la especificidad o reorganizar las reglas CSS.
Cascada vs Especificidad
Aunque muchas veces se confunden, la cascada y la especificidad no son lo mismo.
- La cascada es el proceso completo que sigue el navegador para decidir qué estilo se aplica cuando hay varias reglas en conflicto.
- La especificidad es solo una parte de ese proceso. Mide cuán concreta o precisa es una regla CSS.
Ya hemos visto que la cascada compara:
-
El origen del estilo (navegador, usuario, autor,
!important). - La especificidad de cada regla.
- El orden de aparición.
Una regla puede tener más especificidad, pero si otra tiene !important o aparece más tarde con igual especificidad, podría perder.
En resumen:
La especificidad es un criterio dentro de la cascada, no la decisión final.
Resumen de la Cascada
El navegador aplica los estilos CSS siguiendo este orden:
-
Origen del estilo: Navegador → Usuario → Autor →
!important. - Especificidad: Inline styles > IDs > Clases > Elementos.
- Orden de aparición: La última regla sobrescribe a las anteriores si tienen la misma especificidad.
Herramientas para depurar la cascada
Si algo no se está aplicando como esperas, utiliza las DevTools del navegador:
- Haz clic derecho en el elemento y selecciona "Inspeccionar".
- En la pestaña Styles, verás todas las reglas CSS aplicadas, ordenadas por la cascada.
- Identifica qué regla tiene prioridad y por qué.
