Introducción a las variables en CSS: Definición, uso y beneficios

Las variables en CSS, también conocidas como Custom Properties, son una característica que permite almacenar valores que pueden ser reutilizados en un documento CSS. Esta capacidad de reutilización mejora la mantenibilidad y la coherencia del código CSS.

Variables en CSS

Las variables en CSS permiten definir valores una vez y utilizarlos en varias partes del código. Esto es especialmente útil para gestionar colores, tamaños, fuentes, y otros valores que se repiten a lo largo de una hoja de estilos.

Declarar Variables

Las variables se definen con un prefijo doble guion --, se pueden asociar a cualquier elemento, pero normalmente se asocian al elemento :root (pseudo-clase que se refiere al elemento raíz del documento) para que sea accesible desde cualquier estilo CSS.


:root {
    --background-color: #fff;
    --text-color: #333;
    --link-color: #dd356e;
}

Acceder a las Variables

Para acceder a variables CSS, se utiliza la función var() el cual usa como parámetro el nombre de la variable.


body {
    color: var(--text-color);
    background-color: var(--background-color);
}

a {
    color: var(--link-color);
    border-bottom: solid 1px var(--link-color) ;
}

De esta manera, si se desea cambiar el color de fondo y de los textos, solo se necesita modificar la variable en un solo lugar.

Ventajas

Mantenibilidad: Cambiar el valor de una variable actualiza automáticamente todas las instancias donde se utiliza, reduce el esfuerzo para reemplazarlo en todo el archivo CSS.
Coherencia: Las variables aseguran que los valores sean consistentes a lo largo del documento. Esto es especialmente útil para esquemas de colores y tamaños de fuentes.
Temas: Las variables facilitan la creación de temas, se crean diferentes conjuntos de variables para distintos temas y alternarlos cambiando una clase o un atributo.

Creando temas

Usando variables CSS es sencillo crear temas, para ello podemos crear un conjunto de variables bajo un atributo, por ejemplo data-theme) de la siguiente manera:


[data-theme="dark"] {
    --background-color: #333;
    --text-color: #fff;
}

Podemos aplicar el tema manualmente agregando el atributo data-theme="dark".


<body data-theme="dark">
    ...
</body>

Para que el usuario pueda cambiar de tema, agregamos un botón y luego usamos JavaScript para cambiar el valor del atributo data-theme:


<button type="button" id="change-theme">Change Theme</button>

<script>
let btn = document.getElementById('change-theme');
btn.addEventListener('click', (e) => {
    let theme = (document.body.getAttribute('data-theme') === '') ? 'dark' : '';
    document.body.setAttribute('data-theme', theme);
});
</script>

Pueden ver el ejemplo funcionando en: Demo: Variables y temas en CSS.

Variables CSS en JavaScript

Leer variables CSS

Para leer variables se usa getComputedStyle para tener una instancia del elemento y luego se usa getPropertyValue para acceder al valor de la variable.


let root = document.documentElement;
let backgroundColor = getComputedStyle(root).getPropertyValue('--background-color');
console.log(backgroundColor);

Cambiar variables CSS

Para cambiar variables, se usa el método setProperty de los estilos:


let root = document.documentElement;
root.style.setProperty('--background-color', '#e74c3c');

Conclusión

Las variables en CSS son una herramienta que mejora la mantenibilidad, coherencia y flexibilidad de tus hojas de estilo. Su implementación es sencilla y su impacto en el flujo de trabajo puede ser significativo.