Cascada CSS

Que es la cascada CSS, como comprender los fundamentos y el comportamiento de la cascada CSS y como identificar básicos de ambigüedad en las reglas CSS, Identificar las diferencias con respecto a la herencia y la especificidad CSS.

El objetivo de este artículo es ayudar a la comprensión del fundamento la cascada CSS en las hojas de estilos y poder identificar conflictos básicos de ambigüedad a la hora de establecer las reglas para los estilos CSS.

En un principio puede parecer complicado o confuso como actúa la cascada CSS, dado que trabaja junto a la herencia y la especificidad. Por eso, es importante entender primero la cascada CSS antes que la herencia y la especificidad.

¿Que es la Cascada CSS?

CSS proviene de las siglas del ingles: cascading style sheets, es decir, hojas de estilo en cascada traducido al español y de aquí que sea muy importante entender la palabra cascada; dado que esta es la clave para comprender el comportamiento del CSS.

En algún momento trabajarás en un proyecto y te toparás con que el CSS que crees que debería aplicar a un elemento determinado, no funciona. En la mayoría de los casos el problema suele ser que has establecido dos o más reglas CSS que aplican al mismo elemento. Así, en este punto se ha creado un conflicto de ambigüedad con dichas reglas CSS que aplican a un elemento, y la especificidad CSS es la que resuelve estos conflictos y determinan que regla CSS es la que aplica al elemento en cuestión. Y aquí es donde difiere de lo que tu esperas y lo que en realidad aplica la especificidad CSS, y es por eso la importancia de la comprensión de este tema en su totalidad.

No confundir con la Herencia CSS

También es importante el concepto de Herencia CSS, lo que significa que algunas propiedades CSS heredan por defecto los valores establecidos de su elemento padre, pero otras propiedades no. Esto también puede causar un resultado diferente al que estas esperando en tus estilos CSS.

Cabe mencionar que al referirnos al elemento padre, nos referimos al elemento HTML en el que se encuentra directamente anidado.

No confundir con la Especificidad CSS

Como ya mencionamos es importante también el concepto de Especificidad CSS, lo que significa que en las reglas conflictivas y/o ambiguas entrara en acción. Como un ejemplo básico podemos adelantar que en las hojas de estilo CSS; el orden de las reglas importa y si dos reglas aplican al mismo elemento, se aplica la última regla que se estableció en el documento, es decir, la última regla anula a la primera.

Comprender como funciona la Cascada CSS

Excluyendo reglas conflictivas para fines de comprensión, vamos a exponer con ejemplos como aplica la cascada dependiendo de las reglas CSS establecidas en el documento.

Supongamos este fragmento de código HTML en un documento:

<body>
<h2>Título</h2>
<article>
<h2>Título del Artículo</h2>
</article>
<section>
<h2>Título de la Sección</h2>
</section>
</body>

Expliquemos este fragmento de código HTML:

  1. primero definimos un Título de Encabezado <h2> en raíz (es decir, anidado directamente en <body>).
  2. después definimos un bloque <article> en cual existe otro Título de encabezado <h2>
  3. después definimos otro bloque <section> en el cual existe otro Título de encabezado <h2>

Ejemplo 1:

En primera instancia aplicamos una sola regla CSS:

h2 { color: red; }

Título

Título del Artículo

Título de la Sección

Esta única regla CSS aplicara para todos los Títulos de encabezado <h2> en cascada sin ninguna limitación y todas estas se visualizarán en color rojo.

Ejemplo 2:

Ahora que pasa si cambiamos la regla CSS por una más especifica como esta:

article h2 { color: blue; }

Título

Título del Artículo

Título de la Sección

El resultado es que solo el Título <h2> anidado en <article> es al que se le aplica la regla CSS de visualizarlo en color azul, y solo aplicaría la cascada en otros elementos <h2> anidados en <article>.

Así el primer Título y el que esta anidado en <section> no reciben ninguna regla CSS al no estar anidados en ningún <article>.

Ejemplo 3:

Ahora unamos las dos reglas CSS de los ejemplos anteriores:

h2 { color: red; }
article h2 { color: blue; }

Título

Título del Artículo

Título de la Sección

Aquí, como en el primer ejemplo, aplica la regla en cascada para todos los Títulos de Encabezado <h2> y los establece en color rojo, pero la segunda regla CSS que es más especifica; establece el color azul al Título de Encabezado anidado en <article>, anulando la primera regla CSS, solo en este caso.

Ejemplo 4:

Compliquemos un poco las cosas: con las mismas reglas CSS, supongamos ahora que dentro del elemento <section>, existe otro elemento de bloque <article> anidado en él, y que a su vez existe otro Título de encabezado <h2>.

Entonces el fragmento de código HTML quedaría de la siguiente manera:

<body>
<h2>Título</h2>
<article>
<h2>Título del Artículo</h2>
</article>
<section>
<h2>Título de la Sección</h2>
<artilce>
<h2>Titulo en otro Artículo dentro de la Sección</h2>
</article>
</section>
</body>

Título

Título del Artículo

Título de la Sección

Titulo en otro Artículo dentro de la Sección

Como en el ejemplo anterior, la primera regla CSS aplica en cascada para todos elementos <h2>, pero también la segunda regla CSS aplica para todos los elementos <h2> anidados en cualquier elemento <article>, anulando la primera regla solo en estos casos.

Conclusión

Como vemos la funcionalidad de las Cascadas CSS es simple, lo complicado surge con las diferentes estructuras de anidamiento que generan que diferentes reglas CSS apliquen a un mismo elemento y entonces es donde entra la Especificidad CSS para establecer la regla que debe aplicar al final.

La herencia CSS y la especificidad CSS son temas aparte y una vez que haz comprendido el funcionamiento de la cascada CSS, te recomendamos adentrarte en al tema de la herencia CSS antes de la especificidad CSS.