Custom properties: las variables de CSS — CSS moderno, accesibilidad y arquitectura

Variables nativas en CSS

Llegaste al último módulo de Web, y lo abrimos con una de esas funciones que dan gustito: por fin el CSS tiene variables de verdad.

Las custom properties (o variables CSS) son valores reutilizables que declaras con un nombre que empieza por dos guiones -- y lees con la función var(). A diferencia de las variables de un preprocesador como Sass, son dinámicas: viven en el DOM, cascadean y se heredan. Esa diferencia lo cambia todo, ya verás.

Declarar en :root

El sitio habitual para definir variables globales es el pseudo-selector :root, que representa el documento (equivale a <html> pero con mayor especificidad). Así quedan disponibles en toda la página.

:root {
  --color-primario: #2563eb;
  --color-texto: #1f2937;
  --espacio: 16px;
  --radio: 8px;
}

Usar con var()

.boton {
  background: var(--color-primario);
  color: white;
  padding: var(--espacio);
  border-radius: var(--radio);
}

var() admite un valor de reserva por si la variable no está definida:

.aviso {
  color: var(--color-aviso, #b91c1c); /* usa #b91c1c si --color-aviso no existe */
}

Por qué importan: temas y mantenimiento

Aquí está el oro. Sin variables, cambiar el azul de tu marca era buscar y reemplazar treinta veces rezando por no olvidar ninguna. Con variables:

Un solo punto de cambio. Si tu marca pasa de azul a verde, editas --color-primario una vez en :root y se actualiza toda la interfaz. Una línea.
Temas dinámicos. Como las variables cascadean, puedes redefinirlas en un contexto concreto (una clase, un atributo, una media query) y todo lo que cuelga de ahí cambia de aspecto sin tocar cada regla.

:root { --fondo: white; --texto: #111; }

[data-tema="oscuro"] {
  --fondo: #0f172a;
  --texto: #e2e8f0;
}

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

Cambiar data-tema en <html> reescribe las variables y, con ellas, toda la apariencia. Esa es la base de un modo oscuro mantenible: un atributo, mil estilos cambiando a la vez. Magia de la buena.