Propiedades personalizadas (variables) en CSS

CSS ha ido evolucionando con el paso de los años, entre la primera versión y la actual se han ido incorporando diferententes funciones y utilidades que hacen que maquetar una web sea mucho más cómodo. Una de las últimas incorporaciones son las propiedades personalizadas, a las que habitualmente se las llaman variables por su similitud con las que se utilizan en programación. Esta función las venían implementando ya desde hace tiempo preprocesadores como Sass y Less, lo que hizo que se volvieran muy populares a la hora de maquetar una página web. Sin embargo CSS ha decidido hacerlas nativas y actualmente son soportadas al menos por todos los navegadores importantes.

Las variables de CSS se definen comúnmente en la pseudoclase :root para que éstas sean accesibles a nivel global en todo el documento, aunque nada impide que las puedas definir en un ámbito más local como en una clase específica. La sintaxis es similar a la de cualquier propiedad de CSS pero precedida por dos guiones. Por ejemplo, supongamos que queremos crear dos propiedades personalizadas para almacenar dos colores. Lo que haremos es crear la clase contenedora y dentro ubicaremos las dos propiedades personalizadas a las que llamaremos por ejemplo --color-uno y --color-dos. A cada una le asignaremos un valor de color.

:root {
	--color-uno: #000000;
	--color-dos: #707070;
}

A partir de este momento, podremos acceder a estos valores llamando directamente a la variable deseada. Para hacerlo, a la hora de asignar un valor a una propiedad en la que queramos usar nuestras variables, deberemos usar la sintaxis var(--variable-css). Siguiendo con el ejemplo anterior, supongamos que deseamos usar --color-uno para los h1 de una web. Para eso, simplemente usamos la propiedad color y en el valor var(--color-uno).

h1 {
	color: var(--color-one);
}

De este modo podemos crear tantas propiedades personalizadas como necesitemos. Para mi es especialmente útil a la hora de utilizar fuentes y colores, ya que son valores que se suelen repetir en un diseño y me resulta más sencillo de recordar, además de hacer más sencillo el mantenimiento del código después.