CSS Variables: Propiedades personalizadas en acción

Las CSS Variables (también llamadas Custom Properties) te permiten definir valores reutilizables en tu CSS, haciendo tu código más mantenible y dinámico.

Sintaxis básica

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --spacing-unit: 8px;
  --font-main: 'Roboto', sans-serif;
}

.button {
  background-color: var(--primary-color);
  padding: calc(var(--spacing-unit) * 2);
  font-family: var(--font-main);
}

Valores por defecto

.elemento {
  /* Si --custom-color no existe, usa #333 */
  color: var(--custom-color, #333);
}

Sistema de temas

:root {
  --bg-color: white;
  --text-color: #222;
}

[data-theme="dark"] {
  --bg-color: #222;
  --text-color: white;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

// Cambiar tema con JavaScript
const toggleTheme = () => {
  const current = document.documentElement.getAttribute('data-theme');
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', next);
};

Sistema de espaciado

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
}

.card {
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.button {
  padding: var(--space-sm) var(--space-md);
}

Responsive con variables

:root {
  --container-width: 90%;
}

@media (min-width: 768px) {
  :root {
    --container-width: 720px;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-width: 960px;
  }
}

.container {
  width: var(--container-width);
  margin: 0 auto;
}

Manipulación con JavaScript

// Obtener valor
const root = document.documentElement;
const primaryColor = getComputedStyle(root)
  .getPropertyValue('--primary-color');

// Establecer valor
root.style.setProperty('--primary-color', '#e74c3c');

// Cambio dinámico
const slider = document.querySelector('#fontSize');
slider.addEventListener('input', (e) => {
  root.style.setProperty('--font-size', `${e.target.value}px`);
});

Variables con calc()

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

h1 {
  font-size: calc(var(--base-size) * 2.5);
}

h2 {
  font-size: calc(var(--base-size) * 2);
}

.container {
  width: calc(100% - var(--space-lg) * 2);
}

Conclusión

Las CSS Variables son una herramienta poderosa para crear sistemas de diseño consistentes y fáciles de mantener. La capacidad de cambiarlas dinámicamente con JavaScript las hace aún más versátiles.