Cascada, especificidad y herencia

Aprende a predecir qué regla CSS gana usando la especificidad, y aprovecha la herencia para escribir menos código.

8 min · 3 preguntas

Escribes una regla, recargas la página… y no cambia nada. La mayoría de las veces, el culpable no es un error: es la cascada. Cuando varias reglas apuntan al mismo elemento, el navegador desempata en este orden: el origen de la regla (estilos del navegador, luego los tuyos), la especificidad del selector y, por último, el orden de aparición en el código. Dominar este mecanismo te ahorrará horas de depuración.

p {
  color: gray;
}

.article p {
  color: navy;
}

La especificidad se calcula como una puntuación de tres partes: (ids, clases, elementos). #menu puntúa 1-0-0, .nav-link puntúa 0-1-0, a puntúa 0-0-1. Se compara de izquierda a derecha: #menu (1-0-0) supera a .nav .link .active (0-3-0), incluso con tres clases. Ejercicio mental: ¿cuál gana entre header nav a (0-0-3) y .main-link (0-1-0)? La clase, porque una clase supera a cualquier cantidad de elementos.

header nav a {
  color: steelblue;
}

.main-link {
  color: crimson;
}

La herencia es tu aliada para escribir menos código: las propiedades relacionadas con el texto (color, font-family, font-size, line-height) se transmiten automáticamente a los descendientes. Las propiedades de caja (margin, padding, border, width) no se heredan; menos mal, de lo contrario cada hijo recibiría el borde de su padre. Así que define tu tipografía una sola vez, en el nivel más alto.

body {
  font-family: "Inter", sans-serif;
  color: #1f2937;
  line-height: 1.6;
}

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. Dos reglas apuntan al mismo párrafo: #intro { color: red; } y luego .text { color: blue; }. ¿Qué color se aplica?
   • Azul, porque la clase se declara al final
   • Rojo, porque un id es más específico que una clase
   • Ninguno, el navegador informa de un conflicto
2. ¿Cuál de estas propiedades heredan por defecto los elementos descendientes?
   • margin
   • color
   • border
   • padding
3. Dos selectores tienen exactamente la misma especificidad y apuntan al mismo elemento. ¿Qué regla gana?
   • La regla escrita en último lugar en la hoja de estilos
   • La regla escrita en primer lugar
   • La regla con el selector más corto