Variables CSS, propiedades personalizadas o custom properties

Las variables CSS, también conocidas como propiedades personalizadas o custom properties, nos permiten asignar nombres a valores específicos de las propiedades, permitiéndonos luego utilizar estos nombres como si fueran variables. Una de sus mayores ventajas radica en que al modificar el valor de estas «variables», se actualiza automáticamente en todas las instancias del documento CSS donde se haya empleado ese nombre. Las variables se suelen utilizar en diferentes contextos, como cambiar colores de fondo, tamaños de fuente, márgenes, etc.

Aunque esta funcionalidad no estaba disponible en las primeras versiones de CSS y no era compatible con todos los navegadores en versiones posteriores, su uso se ha popularizado recientemente.

1. Definición de variables CSS o propiedades personalizadas

Para definir una propiedad personalizada pondremos dos guiones  -- delante del nombre que queramos utilizar. Para definir la propiedad personalizada para todo el documento HTML la incluiremos en el pseudoelemento :root. Ejemplo:

:root {
  --principal-color: black; /* Variable personalizada --principal-color */
  --font: "Arial";
}

2 Uso de propiedades personalizadas

Para utilizar una propiedad personalizada hay que insertar su nombre dentro de la expresión var():

.clase {
  background-color: var(--principal-color);
  font-family: var(--font);
}

Ejemplo en CodePen:

3. Buenas prácticas al nombrar y organizar las variables CSS

En un artículo anterior comentábamos las buenas prácticas a seguir al nombrar las clases CSS. Estas buenas prácticas se pueden aplicar, en gran medida, en las variables CSS para mantener un código organizado y fácil de mantener a largo plazo. Veamos algunas de las buenas prácticas a seguir:

1. Nombres descriptivos: Asigna nombres claros y descriptivos a tus variables CSS para que su propósito sea fácil de entender para otros desarrolladores y para ti mismo en el futuro.
2. Consistencia: Mantén una convención de nomenclatura consistente en todo tu proyecto para evitar confusiones y facilitar la colaboración con otros miembros del equipo.
3. Agrupación lógica: Agrupa tus variables relacionadas en bloques lógicos, como colores, tipografía o espaciado, para facilitar la gestión y la búsqueda de variables específicas cuando sea necesario realizar ajustes.