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 cómodo el mantenimiento del código después.

Puedes consultar el soporte actual que tiene en los diferentes navegadores actuales para más seguridad, pero este sistema ya se encuentra ampliamente aceptado.