CSS

Variables CSS (Custom Properties): tokens, temas y runtime

Domina variables CSS como sistema de diseño vivo: define tokens, crea temas consistentes y actualiza estilos en tiempo real sin duplicar reglas.

¿Cuánto sabes de CSS?

📘 Teoría

Claves teóricas

Lo más importante para usar variables con cabeza de producto.

🎯 No definas colores sueltos, define tokens

Evita #2563eb por todas partes. Declara tokens y consume var(--...) para tener consistencia y cambios globales rápidos.

🌳 Scope: global, componente y contexto

Puedes definir en :root, sobrescribir en un componente o cambiar por contexto con un selector como [data-theme="dark"].

🛟 Fallbacks inteligentes

Usa var(--token, valor-seguro) para evitar roturas cuando falta una variable. Es útil en migraciones y componentes compartidos.

🧠 Token semántico > token de color bruto

Mejor --color-surface que --blue-500 dentro del componente. El semántico cuenta intención, no implementación.

🌙 Theming limpio

Puedes enlazar esta lección con modo oscuro: cambia solo variables y todo el sistema visual se actualiza.

⚙️ Variables + JS = UI dinámica

Con documentElement.style.setProperty() ajustas densidad, tamaño o color en runtime sin regenerar CSS.

📚 Relación con arquitectura

Las variables son la materia prima; la arquitectura decide cómo organizarlas. Después de este tema, revisa arquitectura CSS.

🔗 Referencias recomendadas

Documentación: MDN Custom Properties y guía práctica en web.dev.

Fundamentos: declaración, herencia y scope

La base para que tus tokens no se vuelvan un lío.

Una variable CSS se declara con --nombre y se consume con var(--nombre). Como forma parte de la cascada, hereda y puede redefinirse por contexto.

No todo debe ir a :root. Lleva a raíz solo tokens globales; deja tokens de componente dentro del propio componente para evitar contaminación.

Global: :root { --space-md: 1rem; }
Componente: .card { --card-padding: 1rem; }
Contexto: [data-density="compact"] { --space-md: .75rem; }

Scope en tres niveles

:root {
  --space-md: 1rem;
  --color-text: #111827;
}

.card {
  --card-padding: var(--space-md);
  padding: var(--card-padding);
  color: var(--color-text);
}

[data-density="compact"] {
  --space-md: 0.75rem;
}

Sistema de tokens: base y semánticos

Este patrón evita duplicación y facilita rebranding.

Tokens base representan valores crudos (paleta, spacing, radios). Tokens semánticos representan intención de UI (surface, text, accent, danger).

Los componentes deben consumir semánticos. Así puedes cambiar marca o tema sin tocar cada botón, card o formulario.

Base -> semántico -> componente

:root {
  --blue-600: #2563eb;
  --slate-900: #0f172a;
  --white: #ffffff;

  --color-bg: var(--white);
  --color-text: var(--slate-900);
  --color-accent: var(--blue-600);
}

.button-primary {
  background: var(--color-accent);
  color: var(--white);
}

Fallbacks y robustez

Cuando migras un sistema antiguo, los fallbacks son tu red de seguridad: el componente sigue renderizando aunque falte un token.

También puedes combinar variables con funciones como clamp() y calc() para escalas fluidas.

Fallback + cálculo

.title {
  color: var(--color-title, #111827);
  font-size: clamp(1.25rem, var(--title-fluid, 1rem + 2vw), 2rem);
}

.container {
  padding-inline: calc(var(--space-md, 1rem) * 1.5);
}

Variables en runtime (sin rehacer CSS)

Ideal para preferencias de usuario y personalización.

Puedes actualizar tokens desde JavaScript y reflejar cambios visuales al instante: tamaño de fuente, tema, escala de interfaz o branding temporal.

Es más limpio cambiar variables que inyectar clases para cada combinación posible.

Este patrón resulta especialmente útil cuando quieres probar una paleta HSL, un acento de marca o una densidad visual con controles en vivo sin duplicar reglas.

Cambiar token desde JS

const root = document.documentElement;

function setAccent(color) {
  root.style.setProperty('--color-accent', color);
}

function setDensity(mode) {
  root.dataset.density = mode; // compact o comfy
}

Variables CSS como sistema de tokens

1 Claves teóricas 2 Fundamentos: declaración, herencia y scope 3 Sistema de tokens: base y semánticos 4 Fallbacks y robustez 5 Variables en runtime (sin rehacer CSS) 6 Variables CSS como sistema de tokens

🧭 Visuales clave

Scope de variables CSS

Te muestra como combinar tokens globales con overrides locales limpios.

Relacion entre variables globales en root y variables locales de componente.

Flujo de tokens con variables CSS

Ilustra cómo centralizar estilos y propagar cambios de marca de forma consistente.

Flujo de definición en root y consumo de tokens en componentes mediante var().

🧪 Aprende probando

Ejemplo Demo: design tokens aplicados Mira cómo un componente entero cambia solo tocando variables.

⌄

Ejemplo Demo interactiva: variables CSS y HSL en runtime Ajusta tono, saturación y luminosidad para comprobar cómo una variable en `:root` propaga cambios por toda la interfaz sin reescribir componentes.

⌄