CSS son las siglas para Cascading Style Sheets, que significa algo así como: hojas de estilo en cascada. Y, aunque pasamos la vida de frontend pretendiendo saber lo que esto significa, la realidad es que a veces, no muy bien.

Por eso, en esta lección, vamos a aprender que la cascada es un algoritmo, y de paso: vamos a sacarle la mayor ventaja. 😎

Etapas de la cascada

Comencemos con el ejemplo más simple.

div {
	background-color: red;
}

div {
	background-color: orange;
}

La cascada existe para resolver conflictos en los que múltiples selectores podrían aplicar reglas distintas a un mismo elemento HTML, como en el ejemplo. El color que terminará siendo aplicado es orange.

Este algoritmo resuelve los conflictos a través de cuatro capas o etapas.

1. Posición y orden de aparición
2. Especificidad
3. Origen e
4. Importancia

Vamos entonces a entender cada una de ellas.

#1 Posición y orden de aparición

Esta primer etapa, es la que le da nombre al algoritmo, pues conforme la posición y el orden de aparición de las reglas dentro de un archivo CSS dará prioridad a la última en ser declarada. Incluso si las reglas son idénticas ✅

Pero, ¿Qué pasa cuando hay más de una hoja de estilos; más de un archivo CSS? ¡Y regularmente hay más de una! Pues las hojas de estilo pueden llegar de muchas fuentes gracias a la etiqueta <link> o la etiqueta <style> de HTML. Así, estas fuentes adquirirán su prioridad dentro de tu archivo HTML según aparezcan, es decir, que las reglas dentro de etiquetas <link> o <style> que aparezcan más abajo en tu archivo serán más específicas. 🤓

👀 Hay una manera de sobrescribir cualquier regla de cualquier hoja de estilo: si se pone un atributo style “en linea” en una etiqueta HTML (<div style=””>) este atributo anulará todas las demás reglas, sin importar de donde provengan. ¡Pero esto también se puede evitar! Si usamos el atributo !important delante de una regla en nuestra hoja de estilo.

La cascada, también funciona dentro incluso de un selector. Se pueden especificar dos valores para la misma propiedad, esto no está mal. Se pueden brindar alternativas en caso de que el navegador no sea compatible.

.blissmo {
	cursor: pointer;
	cursor: url('https://i.imgur.com/NRJ4Rpc.png');
}

Así, gracias a la posición, podremos dar soporte de compatibilidad ¡sacándole provecho a la cascada!

#2 Especificidad

La siguiente capa en nuestro algoritmo de cascada es una pequeña clasificación que se usa para encontrar: qué selector de CSS es el más específico.

Esta capa es importante, pues emplea puntos para calificar los selectores, asignándoles mayor o menor especificidad, y es importante porque, si un selector gana en puntos: ¡puede romper la regla de la posición! Es decir, que podría conseguir prioridad incluso si existiese otra regla más abajo o adelante en la hoja de estilos.

<div class="blissmo" >Blissmo was here</div>

.blissmo {
	color: indigo;
}

div {
	color: red;
}

En este ejemplo, aunque ambas reglas coinciden, el texto termina siendo color índigo, pues la especificidad que se calcula aquí, dará prioridad a la clase dirigida al elemento; antes que al selector de etiquetas <div>. 🤯

👀 Se puede decir que la especificidad es acumulativa. Esto es una espada de dos filos 🗡️ porque si escribiéramos algo así para un input: input.pelusina_form[type=”text”]:focus {} los puntos de especificidad de cada regla se sumarán y si olvidaremos donde está este selector, sería muy difícil de sobrescribir con otro CSS. Por eso, es buena práctica mantener nuestros selectores lo más simples posible. ¡Verdad bootstrap! 🙄

#3 Origen

Ya vamos terminando, pero antes de irnos debemos hablar un poco del origen. Antes dijimos que a una página web regularmente se le aplican múltiples hojas de estilo de distintas fuentes. ¿Sabías qué, el navegador también aporta su propia hoja de estilos? Pues sí, también los plugins que instalas en mozilla o chrome le aplican su propia hoja de estilos a tus páginas web. ¡Hasta el sistema operativo mete su cuchara agregando una! Por eso, la cascada tiene en cuenta los orígenes de todas las hojas de estilo comenzando de menor a mayor con:

1. Los estilos de agente de usuario. (El navegador)
2. Estilos de usuario local. (El SO, y los plugins)
3. CSS del sitio. (El CSS de nuestra página web)
4. Los !important del sitio.
5. Luego los !important provenientes de plugins o el SO y
6. Finalmente los !important que vengan del navegador

¡Eso! Ahora entiendes mejor la prioridad que la cascada le da al origen. 😋

#4 Importancia

Por último, hay que decir que las reglas también tienen sus niveles de importancia. Por ejemplo, un background o un font-size no tienen la misma importancia que un animation o un transition. Esto es porque las reglas para animaciones y transiciones tienen más importancia que las reglas normales, pues su trabajo es cambiar las reglas normales para animarlas. ✅

👀 Recuerda que siempre podrás utilizar las DevTools para observar las reglas aplicadas a un elemento HTML y se mostrarán en cascada, representando su especificidad. ¿Genial no?

¡Pues ya está, ahora entiendes la cascada! No fue tan difícil ¿vedad? Si disfrutas de este contenido, no dejes de decirme, así me motivo a crear más. Suscríbete y no te pierdas lo siguiente.

Abrazo. Bliss. 🤓

Enlaces relacionados

Curso de CSS

Docs oficiales MDN