Para sorpresa de nadie, descubrí lo que son las variables CSS gracias al curso de Kevin Geary, Page Building 101. En este artículo te cuento un poquillo qué son, cómo las uso y cómo puedes aplicarlas tú mismo en tus diseños web.
Si te interesa oírlo de un profesional, aquí te dejo el vídeo de Kevin en el que trata este tema.
Empecemos por el principio, ¿qué son las variables en CSS?
En esencia, las variables CSS son contenedores para valores que se pueden reutilizar a lo largo de una hoja de estilos. Nos permiten asignar nombres significativos a valores específicos y utilizar esos nombres en lugar de los valores reales. La notación para definir una variable CSS es sencilla, comienza con dos guiones bajos seguidos del nombre deseado para la variable:
--primary: hsl(var(--primary-hsl));
--h1: clamp(3.1rem, 2.772vw + 2.213rem, 6rem);
--space-m: clamp(2.4rem, 0.574vw + 2.216rem, 3rem);En este ejemplo, sacado de las variables creadas para su uso en este blog, vemos tres variables: –primary para el color primario de esta web, –h1 para el tamaño de los encabezados más importantes y –space-m como uno de los valores de espaciado. Recuerda que puedes darle a tus variables el nombre que quieras, pero lo ideal es que sean fáciles de recordar y descriptivos.
¿No sabes qué significa la función clamp() que se ve en el snippet de código de ejemplo? No te pierdas este artículo en el que hablo de la función clamp() y cómo utilizarla 🙂
Y estas variables, ¿para qué nos sirven?
Pues para hacerte la vida más fácil. Tanto si tienes proyectos personales en los que sólo trabajas tú, como si estás en un equipo con más diseñadores y desarrolladores, entender cómo funcionan las variables y saber utilizarlas es *demasiado* útil (e importante).
Facilitan la mantenibilidad
Ya hablamos de este concepto en el artículo del principio DRY development, pero el uso de variables CSS está estrechamente relacionado con esto. Las variables CSS centralizan los valores clave en un solo lugar. Si necesitas ajustar el color principal de tu sitio, solo tienes que modificar la variable –primary, en este caso. Este enfoque simplifica las actualizaciones y evita la necesidad de realizar cambios manuales en múltiples lugares de tu código.
Fomentan la consistencia
Al utilizar variables, puedes asegurar una consistencia visual a lo largo de tu diseño. Por ejemplo, si defines el tamaño de los encabezados principales con la variable –h1, puedes aplicarla a diferentes elementos para garantizar uniformidad.
Mejoran la colaboración
Las variables en CSS contribuyen a un flujo de trabajo más colaborativo, especialmente en equipos de desarrollo grandes. Los diseñadores pueden establecer un conjunto compartido de tokens que los desarrolladores utilizan como referencia en sus hojas de estilos, fomentando un enfoque cohesionado para la implementación del diseño.
Mejoran la legibilidad
Las variables mejoran la legibilidad de las hojas de estilos al proporcionar nombres significativos para los valores. En lugar de utilizar valores codificados como ‘#3498db’ para un color azul, se puede usar un token como `–primario-azul`, haciendo la hoja de estilos más legible y mantenible.
Facilitan la escalabilidad
A medida que los proyectos web crecen en complejidad, la escalabilidad de los estilos se vuelve crucial. Las variables en CSS permiten a los diseñadores construir sistemas de diseño escalables y modulares que se adaptan a las necesidades cambiantes de un sitio web sin sacrificar la consistencia.
¿Y cómo implemento todo esto?
La implementación de variables cambiará en función de cómo hayas construido tu página web: si has usado un constructor visual, como Bricks, dependerá del constructor. Pero, a rasgos generales, has de seguir los siguientes pasos:
Definición de tokens o variables CSS:
Comienza definiendo tus variables al principio de tu hoja de estilos o en un archivo por separado. Luego explicaré como lo he hecho en mi caso, usando Bricks Builder.
Para definir variables aplicables a todo tu sitio web se añadiría lo siguiente en tu hoja de estilos CSS:
:root {
/* tipografia global */
--h1: clamp(3.1rem, 2.772vw + 2.213rem, 6rem);
--h2: clamp(2.5rem, 1.912vw + 1.888rem, 4.5rem);
--h3: clamp(2.1rem, 0.765vw + 1.855rem, 2.9rem);
--h4: clamp(1.8rem, 0.382vw + 1.678rem, 2.2rem);
--text-xxs: clamp(1.2rem, 0.191vw + 1.139rem, 1.4rem);
--text-xs: clamp(1.4rem, 0.191vw + 1.339rem, 1.6rem);
--text-s: clamp(1.6rem, 0.191vw + 1.539rem, 1.8rem);
--text-m: clamp(1.8rem, 0.191vw + 1.739rem, 2rem);
--button: var(--text-m);
}En este caso se han establecido variables para los tamaños de las diferentes tipografías en el sitio web, usando funciones clamp para garantizar la adaptabilidad a diferentes dispositivos.
Usa tus variables para dar estilos a elementos de tu web:
Aplica tokens en tus estilos usando la función «var()». Por ejemplo, si en un constructor visual seleccionas un texto y quieres cambiarle el color, en lugar de darle un color directamente, le das la variable que has creado para el color que quieres utilizar, como var(–primary). Te adjunto una captura sacada de esta web.
Mantenimiento de una biblioteca de tokens
Crea una biblioteca de variables con los datos de cada variable, su propósito y valor. Tenla siempre a mano y úsala como referencia siempre que trabajes en el proyecto. Tampoco está de más añadir «títulos» explicativos dentro de la hoja de estilos, que indiquen para qué sirven las variables que se muestran. Para añadir texto a una hoja CSS utiliza /* texto a añadir */.
Integración de variables con constructores de páginas en WordPress: el problema
Si nos ponemos a hablar de constructores visuales para WordPress, tenemos para rato. Y el caso es que existen muchos constructores que son bastante regulares y limitan mucho la posibilidad de crear webs fácilmente escalables y mantenibles. Por esta razón empecé a usar Bricks, y no lo cambiaría por nada (y esto no es una promo pagada, Bricks mola).
La cuestión es que existen maquetadores que no integran el uso de variables dentro de sus constructores. Elementor, a pesar de ser uno de los más conocidos (o el que más), es uno de ellos. Por ahora (y corrígeme si me equivoco, no estoy 100% al día de sus actualizaciones) no permite el uso de variables a la hora de editar un elemento. ¿Que puedes hacerlo tú a mano en la hoja de estilos de la web? Por su puesto, pero entonces no estarías usando Elementor.
Por eso, y porque tampoco he probado ni tengo acceso a otros constructores visuales, simplemente contaré mi proceso para crear variables CSS en Bricks.
Implementación de variables en Bricks
Pues ala, aquí va mi guía a paso a paso:
- Una vez que ya tienes tu tema de Bricks instalado, debes descargar desde su página oficial el Child Theme para poder trabajar sobre la hoja de estilos sin poner en peligro toda la web y el correcto funcionamiento del constructor.
- Una vez tengas el Child Theme instalado y activo ve a Apariencia > Editor de archivos de temas.
- Una vez aquí podrás trabajar sobre el archivo style.css
- Puedes comenzar a añadir tus variables para tipografías, espacios, color, radios… lo que te apetezca, usando el selector :root.
- Una vez tengas las variables creadas, dentro del editor visual de Bricks verás que este maquetador te permite añadir variables en todos los campos. Es decir, puedes añadir variables en la altura, ancho, padding, margin, color, tamaño del texto, radio, ancho del borde… Básicamente en todas las situaciones en las que puedes usar variables cuando diseñas una web directamente en el archivo CSS, sin constructor visual por medio. Puedes ver el ejemplo que puse arriba: para usar una variable como color, simplemente añado la variable en el apartado de «Sin Procesar».
- Ale, a disfrutar. Fácil y sencillo
De nada, otro truquillo más para ir mejorando poco a poco tus proyectos de diseño web
En resumen, si quieres crear una web fácil de editar, escalar y mantener, las variables son algo que deberías usar siempre y muy a menudo. En mi proceso de creación de webs las uso *sin parar*, es raro que escriba alguna medida o color sin usar una variable predefinida para ello. Y bueno, si quieres probar Bricks (que si no me equivoco ofrecía versión de prueba de 7 días), yo te lo recomiendo demasiado, facilita la vida.
Lo dicho, si te quedan dudas o quieres profundizar puedes echarle un ojo al vídeo del curso de Kevin Geary (enlazado arriba) o ponerte en contacto conmigo por correo o LinkedIn. ¡Gracias por leerme!