Variables en CSS (Custom Properties)

Las variables CSS, oficialmente conocidas como propiedades personalizadas (Custom Properties), permiten almacenar valores específicos para reutilizarlos a lo largo de un documento. Esta funcionalidad facilita la creación de código más mantenible, consistente y dinámico.

Introducción a las variables CSS

Las variables CSS permiten definir valores reutilizables que pueden ser referenciados en múltiples lugares. A diferencia de los preprocesadores como Sass o Less, las variables CSS son nativas del navegador y pueden ser manipuladas con JavaScript en tiempo real.

Sintaxis básica

Las variables CSS se definen con doble guion al inicio (--) y se accede a ellas mediante la función var().

/* Definición de variables */
:root {
  --color-primario: #3498db;
  --color-secundario: #2ecc71;
  --espaciado-base: 16px;
  --fuente-principal: 'Roboto', sans-serif;
}

/* Uso de variables */
.boton {
  background-color: var(--color-primario);
  padding: var(--espaciado-base);
  font-family: var(--fuente-principal);
}

Ámbito de las variables

Las variables CSS respetan la cascada y la herencia, lo que significa que pueden ser definidas globalmente o con un ámbito específico.

:root {
  /* Variables globales */
  --color-texto: #333;
}

.tarjeta {
  /* Variables locales a .tarjeta */
  --padding-tarjeta: 20px;
  padding: var(--padding-tarjeta);
  color: var(--color-texto);
}

.tarjeta-destacada {
  /* Sobrescribe la variable para este elemento */
  --padding-tarjeta: 30px;
}

Ventajas de las variables CSS

1. Mantenibilidad mejorada

Facilitan la actualización de valores que se repiten en todo el código.

/* Sin variables */
.header {
  background-color: #3498db;
}
.boton-principal {
  background-color: #3498db;
}
.enlace-activo {
  color: #3498db;
}

/* Con variables */
:root {
  --color-marca: #3498db;
}
.header {
  background-color: var(--color-marca);
}
.boton-principal {
  background-color: var(--color-marca);
}
.enlace-activo {
  color: var(--color-marca);
}

2. Creación de temas

Permiten implementar temas claros/oscuros o múltiples esquemas de color.

:root {
  /* Tema claro (predeterminado) */
  --color-fondo: #ffffff;
  --color-texto: #333333;
  --color-primario: #3498db;
  --sombra: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tema-oscuro {
  /* Tema oscuro */
  --color-fondo: #222222;
  --color-texto: #f0f0f0;
  --color-primario: #5dade2;
  --sombra: 0 2px 4px rgba(0, 0, 0, 0.4);
}

body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
}

.tarjeta {
  box-shadow: var(--sombra);
}

.boton {
  background-color: var(--color-primario);
}

3. Diseño responsive

Facilitan la adaptación de valores según el tamaño de pantalla.

:root {
  --espaciado: 16px;
  --tamanio-fuente: 16px;
}

@media (min-width: 768px) {
  :root {
    --espaciado: 24px;
    --tamanio-fuente: 18px;
  }
}

@media (min-width: 1200px) {
  :root {
    --espaciado: 32px;
    --tamanio-fuente: 20px;
  }
}

.contenedor {
  padding: var(--espaciado);
}

body {
  font-size: var(--tamanio-fuente);
}

Uso avanzado de variables CSS

Valores por defecto

La función var() puede incluir un valor de respaldo que se utilizará si la variable no está definida.

.elemento {
  /* Usa --color-personalizado si existe, o #3498db si no */
  color: var(--color-personalizado, #3498db);
  
  /* Valores de respaldo anidados */
  margin: var(--margen-personalizado, var(--margen-predeterminado, 16px));
}

Cálculos con variables

Las variables pueden usarse dentro de funciones como calc().

:root {
  --espaciado-base: 16px;
}

.contenedor {
  /* Múltiplos del espaciado base */
  padding: var(--espaciado-base);
  margin-bottom: calc(var(--espaciado-base) * 2);
}

.contenedor-grande {
  padding: calc(var(--espaciado-base) * 1.5);
}

Variables en gradientes y otras funciones

:root {
  --color-inicio: #3498db;
  --color-fin: #2ecc71;
  --angulo: 45deg;
}

.gradiente {
  background: linear-gradient(
    var(--angulo),
    var(--color-inicio),
    var(--color-fin)
  );
}

Concatenación de variables

Aunque CSS no permite concatenar directamente variables con strings, se pueden usar trucos con calc() para algunos casos.

:root {
  --tamanio-base: 16;
}

.elemento {
  /* Convertir el número a px */
  font-size: calc(var(--tamanio-base) * 1px);
  
  /* Para unidades relativas */
  margin: calc(var(--tamanio-base) * 0.5em);
}

Manipulación de variables con JavaScript

Una de las ventajas más poderosas de las variables CSS es que pueden ser manipuladas dinámicamente con JavaScript.

Obtener el valor de una variable

// Obtener una variable CSS
const elemento = document.querySelector('.mi-elemento');
const estilosComputados = getComputedStyle(elemento);
const colorPrimario = estilosComputados.getPropertyValue('--color-primario').trim();

console.log(colorPrimario); // "#3498db"

Establecer el valor de una variable

// Cambiar una variable a nivel de documento
document.documentElement.style.setProperty('--color-primario', '#ff5722');

// Cambiar una variable a nivel de elemento
const tarjeta = document.querySelector('.tarjeta');
tarjeta.style.setProperty('--padding-tarjeta', '40px');

Ejemplo práctico: Cambio de tema

<button id="cambiar-tema">Cambiar tema</button>
<div class="contenido">
  <h1>Título de ejemplo</h1>
  <p>Contenido de ejemplo...</p>
</div>

const botonTema = document.getElementById('cambiar-tema');
const body = document.body;

botonTema.addEventListener('click', () => {
  // Alternar la clase tema-oscuro
  body.classList.toggle('tema-oscuro');
  
  // Actualizar texto del botón
  const temaActual = body.classList.contains('tema-oscuro') ? 'claro' : 'oscuro';
  botonTema.textContent = `Cambiar a tema ${temaActual}`;
});

Ejemplo práctico: Control deslizante para ajustar variables

<div class="controles">
  <label>
    Tamaño de fuente:
    <input type="range" id="tamanio-fuente" min="12" max="24" value="16">
    <span id="valor-fuente">16px</span>
  </label>
</div>
<div class="contenido-ajustable">
  <h1>Título de ejemplo</h1>
  <p>Contenido con tamaño ajustable...</p>
</div>

const sliderFuente = document.getElementById('tamanio-fuente');
const valorFuente = document.getElementById('valor-fuente');

sliderFuente.addEventListener('input', () => {
  const nuevoTamanio = sliderFuente.value;
  document.documentElement.style.setProperty('--tamanio-fuente', `${nuevoTamanio}px`);
  valorFuente.textContent = `${nuevoTamanio}px`;
});

:root {
  --tamanio-fuente: 16px;
}

.contenido-ajustable {
  font-size: var(--tamanio-fuente);
}

Organización de variables CSS

A medida que los proyectos crecen, es importante organizar las variables de manera estructurada.

Agrupación por categorías

:root {
  /* Colores */
  --color-primario: #3498db;
  --color-secundario: #2ecc71;
  --color-acento: #f39c12;
  --color-error: #e74c3c;
  --color-exito: #27ae60;
  
  /* Tipografía */
  --fuente-principal: 'Roboto', sans-serif;
  --fuente-titulos: 'Montserrat', sans-serif;
  --tamanio-base: 16px;
  --peso-normal: 400;
  --peso-negrita: 700;
  
  /* Espaciado */
  --espaciado-xs: 4px;
  --espaciado-s: 8px;
  --espaciado-m: 16px;
  --espaciado-l: 24px;
  --espaciado-xl: 32px;
  
  /* Bordes y sombras */
  --radio-borde: 4px;
  --sombra-suave: 0 2px 4px rgba(0, 0, 0, 0.1);
  --sombra-media: 0 4px 8px rgba(0, 0, 0, 0.1);
  --sombra-fuerte: 0 8px 16px rgba(0, 0, 0, 0.1);
  
  /* Transiciones */
  --transicion-rapida: 0.2s ease;
  --transicion-normal: 0.3s ease;
  --transicion-lenta: 0.5s ease;
}

Sistema de diseño con variables

:root {
  /* Colores base */
  --azul-100: #ebf8ff;
  --azul-500: #3498db;
  --azul-900: #1a365d;
  --verde-100: #f0fff4;
  --verde-500: #2ecc71;
  --verde-900: #1c4532;
  
  /* Asignación semántica */
  --color-primario: var(--azul-500);
  --color-secundario: var(--verde-500);
  --color-fondo: #ffffff;
  --color-texto: #333333;
  
  /* Espaciado con escala */
  --unidad-base: 4px;
  --espaciado-1: calc(var(--unidad-base) * 1); /* 4px */
  --espaciado-2: calc(var(--unidad-base) * 2); /* 8px */
  --espaciado-4: calc(var(--unidad-base) * 4); /* 16px */
  --espaciado-6: calc(var(--unidad-base) * 6); /* 24px */
  --espaciado-8: calc(var(--unidad-base) * 8); /* 32px */
}

/* Uso en componentes */
.boton {
  background-color: var(--color-primario);
  padding: var(--espaciado-2) var(--espaciado-4);
  border-radius: var(--espaciado-1);
}

Compatibilidad con navegadores

Las variables CSS son compatibles con todos los navegadores modernos, pero no con Internet Explorer.

Fallbacks para navegadores antiguos

.elemento {
  /* Fallback para navegadores que no soportan variables */
  color: #3498db;
  /* Navegadores modernos usarán esto */
  color: var(--color-primario, #3498db);
}

Detección de soporte

@supports (--css: variables) {
  /* Código que usa variables CSS */
  .elemento {
    color: var(--color-primario);
  }
}

// Detección en JavaScript
const soportaVariables = window.CSS && 
                        window.CSS.supports && 
                        window.CSS.supports('--css', 'variables');

if (soportaVariables) {
  // Código que usa variables CSS
} else {
  // Alternativa para navegadores antiguos
}

Mejores prácticas

1. Usa nombres descriptivos: Elige nombres que indiquen claramente el propósito de la variable.
2. Establece valores por defecto: Siempre proporciona un valor de respaldo en la función var().
3. Organiza por contexto: Agrupa las variables según su función o componente.
4. Evita la sobrecarga: No crees variables para valores que solo se usan una vez.
5. Documenta tus variables: Añade comentarios que expliquen el propósito de cada grupo de variables.
6. Considera la cascada: Recuerda que las variables pueden ser sobrescritas en selectores más específicos.

Conclusión

Las variables CSS han transformado la forma en que escribimos y mantenemos estilos, permitiendo crear código más dinámico, mantenible y flexible. Al aprovechar su capacidad para ser manipuladas con JavaScript, podemos crear experiencias interactivas y personalizables sin depender de preprocesadores externos.

Dominar el uso de variables CSS es esencial para cualquier desarrollador web moderno, ya que permiten implementar sistemas de diseño coherentes y adaptables que mejoran tanto la experiencia de desarrollo como la del usuario final.