Maquetación Web Dinámica / CSS3 fundamentos: la piel
Especificidad y cascada: quién gana y por qué
"Le puse el color y no cambia nada." Todo desarrollador ha dicho esa frase, y la causa casi siempre es la misma: otra regla más específica está ganando. Hoy aprendes las reglas del juego — y no vuelves a perder una pelea contra tu propio CSS.
La cascada: el sistema de decisión
Cuando varias reglas declaran la misma propiedad sobre el mismo elemento, el navegador decide en este orden:
- Origen e importancia: tus estilos le ganan a los del navegador.
- Especificidad: el selector más específico gana.
- Orden: a igual especificidad, gana la regla que aparece más abajo.
El punto 2 es el que causa el 90% de las confusiones, así que vamos a calcularlo con precisión.
La calculadora 0-0-0
Todo selector tiene un puntaje de tres cifras — (ids, clases, elementos):
| Selector | Puntaje | Por qué |
|---|---|---|
p | 0-0-1 | 1 elemento |
.destacado | 0-1-0 | 1 clase |
p.destacado | 0-1-1 | 1 clase + 1 elemento |
nav ul li a | 0-0-4 | 4 elementos |
#cabecera .menu a | 1-1-1 | 1 id + 1 clase + 1 elemento |
Se compara de izquierda a derecha, como números: 1-0-0 le gana a 0-9-9.
Un id vale más que cualquier cantidad de clases; una clase más que
cualquier cantidad de elementos. Los atributos ([type="email"]) y las
pseudo-clases (:hover, las verás en el módulo 9) cuentan como clases.
Compruébalo — el orden de las reglas en el CSS está invertido a propósito:
<p class="aviso" id="importante">¿De qué color estoy?</p>
<p class="aviso">Yo solo tengo clase.</p>
<p>Y yo solo soy un párrafo.</p>body { font-family: system-ui; padding: 24px; font-weight: 600; }
#importante { color: #7c3aed; } /* 1-0-0: gana en el primero */
.aviso { color: #b45309; } /* 0-1-0: gana en el segundo */
p { color: #334155; } /* 0-0-1: solo queda el tercero */Aunque p está de última en el archivo (y el orden favorece a lo último), la
especificidad se evalúa ANTES que el orden: cada párrafo obedece a su
selector más específico.
La estrategia profesional
La conclusión práctica de todo esto es contraintuitiva: los profesionales mantienen la especificidad BAJA y plana — casi todo con clases simples (0-1-0). Así, sobreescribir es trivial (otra clase más abajo) y nunca necesitas escaladas. La especificidad alta no es poder: es rigidez.
Tienes 'nav ul li a { color: blue; }' y '.enlace { color: green; }' sobre el mismo enlace. ¿De qué color queda?
Mini-reto
Abre DevTools en cualquier página, selecciona un elemento y mira el panel Styles: las propiedades tachadas son reglas que PERDIERON la cascada. Pasa el mouse sobre un selector y DevTools te muestra su especificidad exacta. Acabas de encontrar el arma definitiva para depurar CSS.
Qué sigue
Ya sabes quién gana entre reglas que compiten. Falta el otro mecanismo silencioso del CSS: la herencia — por qué algunos estilos "se contagian" a los hijos y otros no.