Uno de los conceptos más importantes de CSS, y a la vez uno de los conceptos más desconocidos (o malentendidos) es el denominado concepto de la Cascada de CSS. De hecho, la cascada es un tema muy importante, ya que es la C inicial de las siglas CSS.
En algunos casos, el concepto de cascada —aunque importantísimo— puede resultar muy avanzado como para verlo en un tema de introducción. Si estás en una fase muy inicial de aprendizaje y aún no conoces bien HTML/CSS, te aconsejo aprender primero las bases de CSS.
¿Qué es la Cascada CSS?
Cuando hablamos de la Cascada CSS nos referimos al algoritmo (conjunto de reglas y normas) que tiene el navegador para aplicar estilos CSS a un elemento HTML. No es tan sencillo como la mayoría cree, ya que hay múltiples casos (¡muchísimos!) donde pueden existir ambigüedades, y el navegador debe resolverlas para saber que estilo debe aplicar primero y cuál después.
Imagina que tenemos enlazados dos archivos .css mediante una etiqueta <link> y en cada uno tenemos un mismo selector .text aplicando colores diferentes. ¿Cuál de los dos se aplicará finalmente? Quizás pienses que el último que haya sido definido. A veces, esto es cierto, pero muchas otras veces no.
La cascada participa mediante diferentes y variados mecanismos:
Para entender toda esta cantidad de información, este minicurso lo separaremos en varias categorías:
- 1️⃣
Herencia: Los estilos CSS se pueden heredar y resetear. - 2️⃣
Estructura: Si hay un conflicto de estilos, depende mucho de la estructura CSS. - 3️⃣
Especificidad: Cuanto más específico un selector, mayor prioridad de aplicar estilos. - 4️⃣
Alcance: Podemos definir hasta donde queremos que se apliquen los estilos.
Cada uno de estos temas se cubrirá en varias categorías y lo explicaremos en detalle. Aún así, vamos a hacer un pequeño resumen antes de empezar, para tener claro que es cada punto.
Herencia
En CSS, el código que escribes y sus propiedades CSS se aplican al elemento que haces referencia en su selector. Sin embargo, existe un mecanismo denominado Herencia que permite que ciertas propiedades se puedan heredar de un elemento HTML hacia sus elementos HTML hijos.
Existen propiedades que tienen herencia y propiedades que no, además de mecanismos para forzarla o incluso es frecuente encontrar packs de reseteos para anular estilos que vienen por defecto en los navegadores y suelen ser problemáticos a la hora de desarrollar.
Estructura
A la hora de escribir nuestro código CSS debemos tener claro que dicho código tiene una cierta estructura. Dependiendo de varios detalles de esa estructura, el código puede contener conflictos donde 2 o más elementos tienen estilos que se contradicen y el navegador debe saber resolver ese conflicto.
En CSS, un detalle muy conocido es la posibillidad de añadir el texto !important al final de un valor para forzar al navegador a darle prioridad a ese estilo sobre otros. Sin embargo, esto es una forma muy burda de resolver el problema, ya que muy probablemente estés añadiendo varios problemas más.
Especificidad
La Especificidad CSS es una de las partes más importantes de la Cascada de CSS, y también de las más desconocidas. Aprender como el navegador calcula la especificidad y resuelve estos conflictos, te da la capacidad de entender como funciona CSS.
Además, estos conflictos son muy comunes en CSS, y existen formas mucho más limpias de resolverlos sin tener que recurrir a un !important, donde potencialmente añadimos problemas adicionales. Por ejemplo:
1️⃣
Reducir especificidad: El combinador:where()nos permite escribir CSS con una especificidad muy baja, ideal para casos en los que sabemos que posteriormente necesitaremos sobreescribirla.2️⃣
Capas de cascada: La regla @layer nos permite crear capas (como las que tiene Photoshop) para aislar los estilos en diferentes capas y no tener problemas de especificidad CSS.
Alcance
Una característica deseable en CSS es poder controlar el alcance que tienen tus estilos, es decir, a que elementos HTML afectan. Tradicionalmente, CSS siempre ha tenido una naturaleza global, por lo que es una característica que existía de forma nativa.
Sin embargo, en las últimas versiones de CSS se han añadido mecánicas interesantes para gestionarlo. Además, el ecosistema de frameworks Javascript ha añadido formas no nativas de gestionarlo desde hace años.
1️⃣
Limitar scope: Mediante la regla @scope podemos delimitar el alcance de los elementos HTML a los que van a afectas nuestros estilos.2️⃣
Encapsulación DOM: Tanto con Javascript, cómo sólo con HTML, se puede crear una encapsulación del DOM para limitar el alcance, utilizando Shadow DOM.3️⃣ Usando Javascript (mediante mecanismos no nativos) se han inventado metodologías, nomenclaturas o estrategias para controlar el alcance de estilos sin necesidad de soporte por parte del navegador.
