Cascada CSS: Qué es y cómo funciona

El término cascada es algo fundamental en CSS, ya que además forma parte del propio nombre del lenguaje CSS «Cascade Style Sheets». La cascada CSS es el proceso que determina las propiedades que se asignarán a cada elemento de una página.

Cuando tienes varias reglas CSS que afectan a un mismo elemento, todas ellas deben converger en una serie de estilos en base a las reglas de especificidad, al orden en el que aparecen y a su importancia. Los algoritmos que gestionan la cascada CSS deben encargarse de resolver los posibles conflictos.

Si tienes dos o más reglas definidas que compiten por ser aplicadas a la misma propiedad, debe determinarse cuál es la que se debe aplicar. Todo esto ocurre aunque tengas una sola hoja de estilos CSS y no uses CSS en línea en tu código HTML, ya que los navegadores también incluyen su propio conjunto de reglas por defecto. Estos son los primeros estilos que se aplican y, seguidamente, pasarán a procesarse las reglas que hayas definido en tus hojas de estilo.

Especificidad de los elementos

Las especificidad CSS determina la prioridad de las reglas CSS que se deben aplicar. La especificidad se calcula en base a los selectores de cada una de las reglas:

1. Prioridad 1: Las reglas CSS aplicadas en las hojas de estilo a elementos mediante su etiqueta o pseudo elementos.

   div {
     color: blue;
   }

2. Prioridad 2: Las reglas CSS aplicadas en las hojas de estilo a clases, pseudo clases o atributos.

   .container {
     color: red;
   }

3. Prioridad 3: Las reglas CSS aplicadas en las hojas de estilo a identificadores mediante su atributo id.

   #cabecera {
     color: orange;
   }

4. Prioridad 4: Las reglas CSS aplicadas en línea en el código HTML mediante el atributo style.

   <div id="cabecera" class="container" style="color: purple;">Texto</div>

Siempre se aplicarán las reglas de mayor prioridad sobre todas las demás. Sin embargo, resulta habitual encontrar reglas CSS con selectores anidados:

.container p .button-primary {
  background: blue;
  color: white;
}

De haber varios selectores que aplican las mismas propiedades a un mismo elemento, se contarán los selectores de cada tipo que incluye cada regla para calcular cuál es la de mayor prioridad. Se parte de un número de cuatro dígitos 0 0 0 0 para formar un número final que determinará su especificidad.

1. Sumamos una unidad al primer dígito si se trata de un selector en definido en línea mediante el atributo style.
2. Sumamos una unidad al segundo dígito por cada identificador o #id en el selector CSS.
3. Sumamos una unidad al tercer dígito por cada clase, pseudo clase o atributo del selector.CSS.
4. Sumamos una unidad al cuarto dígito por cada etiqueta o pseudo etiqueta del selector.CSS.

Aquí tienes algunos ejemplos:

div {
  color: red;
} /* 0,0,0,1 */
div p {
  color: purple;
} /* 0,0,0,2 */
#main div {
  color: green; }
/* 0,1,0,1 */
#main .container:hover {
color: orange;
} /* 0,1,2,0 */
#main .container:hover button {
  color: blue;
} /* 0,1,2,1 */
#main .container:hover>button {
  color: yellow;
} /* 0,1,2,1 */

Puedes consultar más detalles y encontrar más ejemplos acerca de la especificidad CSS en el tutorial de especificidad CSS.

Orden de las reglas

Cuando varios selectores tienen la misma prioridad, entonces tendrán prioridad las últimas reglas en ser definidas. Aquí cobra importancia el orden en el que se incluyen los archivos CSS o el lugar en donde se agreguen estilos mediante la etiqueta style.

En cualquier caso, las reglas definidas mediante el atributo style siempre prevalecerán sobre el resto. De definirse la misma regla varias veces, siempre tendrá prioridad la última en ser definida.

Importancia

En CSS existe una cláusula llamada !important que permite saltarse las reglas de precedencia, convirtiendo en prioritaria a cualquier propiedad CSS que la incluya:

.container {
  color: blue !important;
}

El único modo de sobrescribir el valor de una propiedad que use esta cláusula consiste en incluirla de nuevo posteriormente bajo la misma regla. Si las reglas son diferentes, se aplicarán las reglas de especificidad y orden que ya hemos visto.

---