Introducción

En CSS, el orden en que se aplican los estilos determina el aspecto final de una página web. Dos conceptos fundamentales son cascada y especificidad. Esta guía explica cómo funcionan, cómo se calculan y cómo aprovecharlos para escribir CSS mantenible y predecible.

¿Qué es la cascada?

La cascada es el algoritmo que decide cuál regla se aplica cuando varias coinciden con el mismo elemento. Se basa en tres pilares:

• Importancia: !important sobrescribe cualquier otra regla (excepto otro !important con mayor especificidad).
• Origen: estilos del navegador user agent, estilos del usuario, estilos del autor y estilos inline.
• Especificidad: medida numérica que determina la prioridad de la regla.

¿Qué es la especificidad?

La especificidad es un cálculo que asigna un peso a cada selector. Se expresa como una tupla (a,b,c,d):

• a: si el selector contiene !important (0 o 1).
• b: número de selectores de ID.
• c: número de clases, atributos y pseudo‑clases.
• d: número de elementos y pseudo‑elementos.

Cuanto mayor sea la tupla (comparada de izquierda a derecha), mayor prioridad tiene la regla.

Comparativa visual: Cascada vs Especificidad

Ejemplos prácticos

Veamos cómo se resuelve la prioridad en distintos casos.

/* 1️⃣ Regla genérica */
body { color: black; }
/* 2️⃣ Clase */
.highlight { color: blue; }
/* 3️⃣ ID */
#main { color: red; }
/* 4️⃣ Inline */
<div id="main" style="color: green;">Texto</div>

Resultado: el texto será verde porque el estilo inline tiene mayor especificidad que cualquier selector externo.

Ejemplo con !important

.highlight { color: blue !important; }
#main { color: red; }

Aunque el selector #main es más específico, la regla .highlight { color: blue !important; } la supera porque !important eleva su peso a (1,0,1,0) frente a (0,1,0,0).

Mejores prácticas y tips de depuración

• Evita !important salvo casos muy controlados (p.ej. librerías de terceros).
• Prefiere clases sobre IDs para mantener la especificidad baja y facilitar la sobrescritura.
• Utiliza metodologías CSS como BEM o OOCSS para estructurar los selectores y reducir conflictos.
• Herramientas de inspección: Chrome DevTools > Computed Styles muestra la cadena de cascada y la especificidad.
• Calcular manualmente: usa extensiones como Specificity Calculator o la función getComputedStyle en la consola.

Compatibilidad y rendimiento

Los algoritmos de cascada y especificidad son parte del estándar CSS y están soportados en todos los navegadores modernos (Chrome, Edge, Firefox, Safari). No impactan el rendimiento de renderizado; sin embargo, un exceso de selectores altamente específicos (p.ej. anidaciones profundas) puede dificultar el mantenimiento y generar repintados innecesarios.

Preguntas frecuentes

¿Por qué inline tiene mayor especificidad que un ID?

Porque el atributo style se considera como (1,0,0,0), equivalente a un nivel superior en la jerarquía.

¿Se pueden combinar varios !important?

Sí, pero el que tenga mayor especificidad gana. Si la especificidad es idéntica, el último en el archivo prevalece.

¿Cómo resetear la especificidad?

Usando all: initial; o reescribiendo la regla con una selector más específico (p. ej. añadiendo una clase extra).