¿Cómo funciona CSS en realidad?
Casi todos hemos creado páginas web en nuestra carrera como desarrolladores, varios se quedan en el área y otros deciden migrar a otra área en la que no sufran tanto por CSS y JS. Mientras que varios deciden aprender más acerca de JavaScript y profundizan en el lenguaje o en las herramientas y los frameworks, raro es el desarrollador que decide profundizar en CSS.
Cuando decidimos añadir estilo a nuestra página/aplicación web, solemos delegar todo el estilo a componentes que ya tengan estilos prediseñados, utilizando uno de los muchos frameworks CSS que hay. Aunque hacer esto no es muy recomendable según la situación, muchas veces nos quitamos un peso importante de encima.
Hoy, vamos a explorar CSS a profundidad, veremos cómo funciona y qué lo hace tan “extraño”.
Y a todo esto, ¿Dónde está la cascada?
La C de Cascade no es parte de un juego de palabras, CSS realmente funciona en forma de cascada. Quizá te has encontrado con la siguiente pregunta o alguna variante similar en internet (o quizá no):
¿De qué color es este <div>?
¿Sabes la respuesta? Ve a este código en acción:
Probablemente estarás pensando “¿QUÉ? 🤯 ¿Pero cómo?”, no te preocupes, todo tiene una razón. No importa realmente el orden en el que están las clases en el elemento HTML, si no en la declaración del CSS. Ambas clases hacen lo mismo (ponle el color X de fondo al elemento con la clase Y), pero entran en conflicto y quien gana aquí es la última clase, es decir, la clase .azul, porque fue la que se declaró “más al final” del CSS.
¿Fácil? ¿Difícil? Vamos a ver un ejemplo más sencillo: ¿De qué color es el texto?
Ahora velo en acción:
La clase dice “Ponle color al texto” ¿Y quién gana? La segunda declaración de la clase, porque es la que aparece más al final del CSS, más abajo de la cascada de estilos.
Lo mismo aplica cuando tienes varios archivos CSS. Ve la siguiente captura:
Mismo ejemplo, pero ahora cada clase está en un archivo separado. Cuando el navegador interpreta todo el CSS de la página, encuentra primero (más arriba de la cascada) al color rojo y encuentra después (más abajo en la cascada) el color azul, por eso al final el texto aparece azul.
Prueba a descargar el código y pruébalo en tu computadora, verás cómo cambia el resultado cuando cambias de lugar las clases o cuando cambias el orden de los archivos.
Continuemos a otro tema: especificidad.
Especefeci… ¿Qué?
Es-pe-ci-fi-ci-dad. Sí, es casi un trabalenguas 😜 pero verás que es fácil y hasta entretenido. Ve el siguiente ejemplo:
Parecería que el color de fondo que se aplicará será el rojo, pero no es así. Ve cómo en realidad se aplica el verde.
¿Y esto por qué? Porque el primer selector es más importante que el segundo, es más específico, aunque el segundo esté más abajo en la cascada. La importancia (especificidad) de los selectores va en este orden:
ID’s > Clases, atributos y pseudo-clases > Elementos y pseudo-elementos.
Y también se calcula de la misma manera: 3 valores que, entre más incremente cada uno, más específico es. Ve como Visual Studio Code nos ayuda a calcular la especificidad.
Lo puedes ver como números decimales (aunque si un selector es muy específico, quizá lo verías como un número hexadecimal 😅). Por cada ID del selector, añade 100, por cada clase/atributo/pseudo-clase, añade 10 y por cada elemento y pseudo-elemento añade 1.
Así, por ejemplo, este selector totalmente inventado por mí tiene una especificidad de 151 o (1, 5, 1)
Aún así, existe algo que puede ser más específico: los estilos embebidos. Esos estilos que no se recomiendan son más específicos que cualquier selector. Vamos a tomar como base el selector anterior. ¿Cómo podemos sobre-escribirlo? Así:
Pero incluso hay algo que es mucho más específico que cualquier selector y que los estilos embebidos: !important. ¿Cómo sobre-escribimos un estilo embebido? Así:
Los cuáles tampoco te recomiendo. Por lo tanto, podemos mostrar la especificidad de este modo:
Important > estilos embebidos >ID’s > Clases, atributos y pseudo-clases > Elementos y pseudo-elementos > estilos del navegador y selector universal (*)
Siguiendo con la analogía de sumar, podemos actualizar la analogía a esto:
- +10,000 cuando encuentres un
!important. - +1,000 cuando encuentres un estilo embebido.
- +100 cuando encuentres un ID.
- +10 cuando encuentres uno o más clases, atributos y/o pseudo-clases.
- +1 cuando encuentres uno o más elementos y/o pseudo-elementos.
- +0 para los estilos del navegador y el selector universal (realmente nadie cuenta estos últimos, pero es importante saber cuál es su rol).
Veamos un ejemplo real
Veamos un caso que me encontré realizando un proyecto: cómo cambiar el fondo de un switch de MaterializeCSS sólo cuando está activado:
El switch (al cuál yo llame miSwitch, +100) es un <div> (+1) con la clase .switch (+10) que tiene una <label>(+1) adentro, cuya <label> tiene adentro un <input> (+1) que quiero que esté checado (:checked, +10) y que tiene a lado un <span> (+1) con la clase .lever (+10), dándonos un total de 134 de especificidad o (1, 3, 4)
Mientras que en Materialize, se define como un elemento con la clase .switch (+10) que tiene adentro una <label> (+1) que a su vez tiene un <input> (+1) de tipo checkbox ([type=checkbox], +10) que está checado (:checked+10) y que tiene a lado un elemento con la clase .lever(+10), dándonos un total de 42 de especificidad o (0, 4, 2).
En resumen
CSS es igual de difícil que otros lenguajes, sólo es cosa de saber cuáles son sus particularidades para entenderle. La cascada de estilos es algo importante de conocer, pero es mucho más importante y recomendable aprender la especificidad de CSS.
La especificidad de un selector consta del número de veces que aparece un ID, una clase y un elemento dentro de este. El selector más específico será el que se aplique, no importa en qué momento se declare.
Un truco para calcular la especificidad es añadiendo 100 cuando el selector tenga un ID, 10 cuando tenga una o más clases, atributos y/o pseudo-clases y 1 cuando tenga uno o más elementos y/o pseudo-elementos. Los estilos embebidos (añade 1,000) son más específicos que cualquier selector y los !important (añade 10,000) son más específicos que un estilo embebido.
