Qué son las variables CSS
Las variables CSS (también llamadas custom properties) son valores reutilizables que se definen una vez y se referencian en cualquier parte del CSS. La sintaxis es --mi-variable: valor para definir y var(--mi-variable) para usar. A diferencia de las variables de Sass, las CSS viven en runtime: podés cambiarlas con JS o con media queries y todo el sistema se actualiza.
Por qué importan
- Single source of truth: cambiás un valor y se actualiza en todos lados.
- Theming dinámico: dark mode, alto contraste, temas personalizados.
- Componentes reutilizables: los componentes consumen variables, no valores fijos.
- Cascade nativo: las variables respetan herencia, lo que permite scoped overrides.
Estructura recomendada
El patrón estándar es definir todas las variables globales en :root:
:root {
--color-primary: #0f172a;
--color-accent: #059669;
--bg: #ffffff;
--text: #09090b;
--radius: 8px;
--space: 1rem;
}Después usás var(--color-primary) donde haga falta.
Categorías típicas
- Color: primario, acento, fondo, texto, bordes, estados (success, error, warning).
- Tipografía: font-family, tamaños, pesos, line-heights.
- Spacing: una escala (4, 8, 16, 24, 32, 48, 64).
- Radios: sm, md, lg, xl o uno único base.
- Sombras: shadow-xs, sm, md, lg.
- Transiciones: tiempos y easings consistentes.
Dark mode con una media query
El uso más poderoso de variables es para dark mode. Definís el set claro en :root y el oscuro dentro de @media (prefers-color-scheme: dark). Los componentes no saben de modos: consumen --bg y --text, y CSS hace el resto.
:root {
--bg: white;
--text: black;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: black;
--text: white;
}
}Manipulación con JavaScript
Para cambiar una variable desde JS:
document.documentElement.style.setProperty('--color', '#fff');Esto te permite implementar selectores de tema, sliders que afectan el design system en vivo, modos de accesibilidad y cualquier cambio dinámico sin recompilar nada.
Buenas prácticas
Nombres semánticos por sobre nombres descriptivos: --color-primary es mejor que --blue. Si mañana el primario cambia a verde, no tenés que renombrar todo. Mantené una escala consistente para spacings y tipografía: 4, 8, 16, 24 funciona mejor que valores arbitrarios. Y agrupá las variables por categoría con comentarios claros.