Especificidad, herencia y cascada

Cuando construyes un sitio web, escribes muchas reglas CSS. A veces, dos reglas intentan dar estilos diferentes al mismo elemento HTML.

Por ejemplo, una regla puede hacer que todos los párrafos sean grises, mientras otra hace que un párrafo especial sea rojo. El navegador necesita una forma clara de decidir qué regla gana.

Ese sistema de decisión se basa en la cascada, la especificidad, la herencia y el orden de las reglas.

Qué significa la cascada

La cascada es el sistema que usa el navegador para decidir qué regla CSS se aplica cuando hay conflictos.

El navegador mira todas las reglas que coinciden y hace preguntas como:

• ¿Una regla está marcada como más importante?
• ¿Un selector es más específico?
• Si las reglas son iguales, ¿cuál viene después?

<p class="intro">¡Bienvenido a mi sitio!</p>

<style>
  p {
    color: blue;
  }

  .intro {
    color: green;
  }
</style>

El párrafo es verde porque .intro es más específico que p.

La cascada te permite escribir primero estilos generales y luego estilos más específicos solo donde los necesitas.

Orden de reglas: las reglas posteriores pueden ganar

Si dos reglas CSS normales tienen la misma fuerza y apuntan al mismo elemento, gana la regla escrita después.

<button class="button">Haz clic</button>

<style>
  .button {
    background-color: blue;
    color: white;
  }

  .button {
    background-color: red;
  }
</style>

El botón es rojo porque la segunda regla .button viene después.

Esto es útil cuando cargas tu propio CSS después de la hoja de estilos de una biblioteca. Si tu selector tiene la misma fuerza, tu regla posterior puede ganar.

Si un estilo no aparece en la pantalla, revisa si otra regla más abajo en el archivo lo está sobrescribiendo.

Especificidad: algunos selectores son más fuertes

La especificidad es el peso de un selector. Un selector más específico normalmente gana sobre uno menos específico, incluso si el selector menos específico aparece después.

<h2 id="main-title" class="title">Mi artículo</h2>

<style>
  #main-title {
    color: blue;
  }

  .title {
    color: orange;
  }
</style>

El encabezado es azul porque un selector de ID es más fuerte que un selector de clase.

Intenta mantener tus selectores simples. Los selectores muy fuertes pueden ser difíciles de sobrescribir más adelante.

Una escala simple de especificidad

No necesitas memorizar matemáticas complejas. Para principiantes, esta escala simple es suficiente:

• Los selectores de elemento, como p, h1 y button, son los más débiles.
• Los selectores de clase, como .card y .nav-link, son más fuertes.
• Los selectores de ID, como #header, son más fuertes que las clases.
• Los estilos inline escritos en HTML con style="" son más fuertes que las reglas normales de una hoja CSS.

<div id="hero" class="banner">Hola</div>

<style>
  #hero {
    background-color: yellow;
  }

  .banner {
    background-color: blue;
  }
</style>

El fondo es amarillo porque #hero es más fuerte que .banner.

Usa selectores de elemento para valores básicos. Usa selectores de clase para estilos reutilizables. Usa selectores de ID pocas veces para estilos, porque son difíciles de sobrescribir.

Evita los estilos inline para el estilo normal de una página. Son útiles en casos especiales, pero hacen que el CSS sea más difícil de mantener.

Herencia: algunos estilos se transmiten

La herencia significa que un elemento padre puede pasar algunas propiedades CSS a sus hijos.

Las propiedades relacionadas con texto suelen heredarse. Algunos ejemplos son color, font-family y a veces font-size.

<div class="card">
  <h2>Bienvenido</h2>
  <p>Este es un día <em>genial</em>.</p>
</div>

<style>
  .card {
    color: blue;
    font-family: Arial, sans-serif;
  }
</style>

El encabezado, el párrafo y el texto em usan texto azul y la fuente Arial porque heredan esos estilos de .card.

Un caso de uso común es definir la fuente principal en el elemento body.

Así, la mayor parte del texto de la página usa esa fuente sin repetir la regla en todas partes.

Cuándo la herencia puede confundir a principiantes

No todas las propiedades CSS se heredan.

Las propiedades de texto suelen heredarse. Las propiedades de diseño y caja normalmente no.

<div class="message">
  <p>Este párrafo está dentro de la caja.</p>
</div>

<style>
  .message {
    border: 1px solid black;
    color: blue;
  }
</style>

El texto del párrafo se vuelve azul porque color se hereda.

Pero el párrafo no obtiene su propio borde. El borde pertenece solo a .message.

Esto es bueno. Si los bordes se heredaran, cada elemento anidado dibujaría su propio borde y la página se volvería desordenada rápidamente.

Ejemplo de reglas en conflicto

Aquí hay un conflicto directo donde dos reglas apuntan al mismo enlace.

<a href="#" id="special-link" class="nav-link">Inicio</a>

<style>
  .nav-link {
    color: green;
  }

  #special-link {
    color: deeppink;
  }
</style>

El enlace es rosa porque #special-link es un selector de ID.

La regla .nav-link es válida, pero un selector de clase es más débil que un selector de ID.

Qué hace !important

!important es una palabra clave especial que hace que una declaración se adelante a las declaraciones normales.

<p id="unique-text" class="text">Lee esto.</p>

<style>
  p.text {
    color: red !important;
  }

  #unique-text {
    color: blue;
  }
</style>

El párrafo es rojo porque la declaración roja usa !important.

Sin !important, ganaría el selector de ID.

Cuándo no usar !important

No uses !important solo porque tu CSS no funciona.

Puede arreglar la pantalla por un momento, pero a menudo crea un problema más difícil después. Si necesitas sobrescribir esa regla otra vez, quizá sientas que debes agregar otro !important.

Antes de usarlo, revisa:

• ¿Hay otro selector más específico?
• ¿Hay otra regla escrita después?
• ¿Puedes usar una clase más clara?
• ¿Puedes quitar un selector de ID innecesario?

Cuándo !important puede ser aceptable

Hay casos raros donde !important puede ser razonable.

Un ejemplo es una clase de utilidad pequeña que siempre debe hacer una sola cosa:

Otro ejemplo es sobrescribir estilos de terceros que no puedes editar.

Aun así, usa !important con cuidado y mantenlo aislado.

Errores comunes de principiantes

• Pensar que el orden de las reglas siempre gana. En reglas normales, la especificidad se revisa antes que el orden.
• Agregar !important demasiado rápido en lugar de encontrar el conflicto real.
• Usar selectores pesados como #main-nav ul li a.active para estilos simples.
• Esperar que todas las propiedades se hereden. Bordes, márgenes, padding y fondos normalmente no se heredan.
• Usar selectores de ID para estilos reutilizables. Las clases suelen ser más fáciles de mantener.

Mini tarea

Mira este HTML y CSS:

<h3 class="heading" style="color: blue;">Noticias</h3>

<style>
  h3.heading {
    color: orange;
  }

  .heading {
    color: green;
  }
</style>

¿De qué color será el h3 en la pantalla?

Respuesta: será azul porque el estilo inline es más fuerte que las reglas normales de la hoja CSS.

Quiz corto

Pregunta 1: ¿Qué selector es más fuerte: una clase o un ID?

Respuesta: Un selector de ID es más fuerte que un selector de clase.

Pregunta 2: Si dos selectores de clase apuntan al mismo elemento y definen colores diferentes, ¿cuál gana?

Respuesta: Si ambos selectores tienen la misma fuerza, gana el que está escrito después.

Pregunta 3: ¿La propiedad border se hereda automáticamente de un padre a un hijo?

Respuesta: No. Los bordes no se heredan por defecto.

Pequeño reto

Este párrafo debería tener un fondo rojo, pero ahora es verde. Haz que la regla .alert sea más fuerte que #content p sin usar !important.

<div id="content">
  <p class="alert">Advertencia: ¡guarda tu trabajo!</p>
</div>

<style>
  #content p {
    background-color: green;
  }

  /* Corrige este selector */
  .alert {
    background-color: red;
  }
</style>

Una posible respuesta:

Esto gana porque combina un selector de ID con un selector de clase, lo que lo hace más específico que #content p.

Resumen

• La cascada es la forma en que el navegador decide qué regla CSS gana.
• El orden de las reglas importa cuando las reglas coincidentes tienen la misma fuerza.
• La especificidad es el peso de un selector.
• Los selectores de ID son más fuertes que los selectores de clase, y los selectores de clase son más fuertes que los selectores de elemento.
• La herencia pasa algunos estilos de texto de padres a hijos.
• !important fuerza una declaración por delante de las reglas normales, pero debería evitarse la mayor parte del tiempo.