LuisLlamas Logo
css-variables-custom-properties

Qué son las variables CSS y cómo usarlas para crear temas dinámicos

  • 5 min
  • Intermedio

Una variable CSS es un valor reutilizable con nombre que podemos usar en distintas reglas de nuestra hoja de estilos.

Su nombre oficial es Custom Properties, pero casi todo el mundo las llama variables CSS. Sirven para no repetir una y otra vez el mismo color, espaciado, fuente o tamaño por todo el proyecto.

Pensad en un color corporativo como #0055ff. Lo usamos en botones, enlaces, bordes, iconos y titulares. Un día alguien decide que ese azul debe ser “un poco más verdoso, más fresco, más startup que hace cosas con IA”. Si lo habéis escrito a mano en cincuenta sitios, os toca buscar y reemplazar por todos lados.

Con variables CSS, cambiáis el valor en un único sitio y todo lo que depende de él se actualiza.

Qué guardar en variables

No todo merece convertirse en variable. Si un valor aparece una sola vez y no representa ninguna decisión de diseño, quizá puede quedarse como está.

  • Colores principales y estados: --color-primario, --color-error, --color-exito.
  • Tipografías: --fuente-base, --fuente-titulos.
  • Espaciados: --space-xs, --space-sm, --space-md.
  • Radios: --radius-sm, --radius-md.
  • Sombras: --shadow-card, --shadow-modal.
  • Duraciones: --duration-fast, --duration-normal.

Declarar variables

Las variables CSS se declaran con un nombre que empieza obligatoriamente por doble guion (--).

:root {
  --color-primario: #0055ff;
  --color-secundario: #ff4500;
  --fuente-base: "Helvetica Neue", Arial, sans-serif;
  --espaciado-mediano: 1rem;
}
Copied!

La pseudo-clase :root apunta al elemento raíz del documento, que en HTML equivale a <html>. Si definimos ahí las variables, quedan disponibles para toda la página.

Poned nombres que expliquen intención, no apariencia. --color-error suele ser mejor que --rojo, porque mañana quizá el error no sea rojo exacto, sino granate, coral o lo que toque.

Usar variables con var()

Para leer una variable usamos la función var().

.boton-principal {
  background-color: var(--color-primario);
  padding: var(--espaciado-mediano);
  font-family: var(--fuente-base);
}

.enlace-destacado {
  color: var(--color-primario);
}
Copied!

Ahora el valor real vive en :root, y las reglas solo dicen qué intención visual quieren usar. Si mañana cambiamos esto:

:root {
  --color-primario: #008c7a;
}
Copied!

Todos los elementos que usan var(--color-primario) adoptarán el nuevo color.

Valores de respaldo

var() puede recibir un segundo valor de respaldo. Ese valor se usa si la variable no existe.

.aviso {
  background: var(--color-aviso, #fff7ed);
  color: var(--color-texto-aviso, #7c2d12);
}
Copied!

Esto significa: “usa --color-aviso; si no existe, usa #fff7ed”. Es muy práctico en componentes reutilizables, porque evita que el diseño se rompa si falta una variable.

El valor de respaldo no se usa si la variable existe pero contiene un valor inválido para esa propiedad. CSS intenta resolverlo y, si no puede, aplica sus reglas normales de cascada y valor inicial.

Valores complejos

Los valores que podemos guardar en una variable CSS no tienen porque ser un único valor. Pueden ser cualquier expresión CSS válida, y participar en (casi) cualquier expresión.

:root {
  --radius-md: 0.75rem;
  --shadow-card: 0 12px 30px rgb(0 0 0 / 12%);
  --duration-fast: 0.2s;
}

.card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-fast) ease;
}
Copied!

Variables con cálculos

Las variables funcionan muy bien con calc(). Podemos guardar una medida base y construir otras a partir de ella.

:root {
  --espacio: 1rem;
}

.tarjeta {
  padding: calc(var(--espacio) * 2);
  margin-bottom: var(--espacio);
}
Copied!

Esto ayuda a mantener una escala coherente. En lugar de inventar 13px, 17px, 21px y otros números que aparecen una tarde porque sí, trabajamos con proporciones.

Variables y cascada

Las variables CSS participan en la cascada. Esto significa que pueden cambiar según el selector, el contexto o la herencia.

:root {
  --color-acento: #2563eb;
}

.tarjeta {
  border-top: 4px solid var(--color-acento);
}

.tarjeta.alerta {
  --color-acento: #dc2626;
}

.tarjeta.exito {
  --color-acento: #16a34a;
}
Copied!

La regla .tarjeta no cambia. Siempre usa --color-acento. Lo que cambia es el valor de la variable según la clase que tenga la tarjeta.

Este patrón es un muy potente para componentes, porque permite que una misma estructura visual adopte variaciones sin duplicar todo el CSS.

Ámbito de una variable

Una variable definida en :root es global. Una variable definida dentro de un selector solo existe para ese selector y sus descendientes.

.panel {
  --panel-fondo: #ffffff;
  --panel-borde: #e5e7eb;

  background: var(--panel-fondo);
  border: 1px solid var(--panel-borde);
}

.panel.destacado {
  --panel-fondo: #eff6ff;
  --panel-borde: #93c5fd;
}
Copied!

Esto permite crear pequeñas “configuraciones locales”. El componente se comporta como una máquina que recibe valores por fuera y los aplica dentro.

No hace falta que todas las variables sean globales. Si un valor solo tiene sentido dentro de .panel, declararlo dentro de .panel hace el CSS más fácil de leer y mantener.

Crear temas y modo oscuro

Uno de los usos casos más ilustrativos de las variables CSS es ver cómo usarlos para crear temas. Definimos nombres estables (--fondo, --texto, --borde) y cambiamos sus valores según el contexto.

:root {
  --fondo: #ffffff;
  --texto: #1f2937;
  --borde: #e5e7eb;
}

body.modo-oscuro {
  --fondo: #111827;
  --texto: #f9fafb;
  --borde: #374151;
}

.tarjeta {
  background: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--borde);
}
Copied!

El CSS del componente no necesita saber si está en modo claro u oscuro. Solo consume variables. El tema se decide en otra capa.

También podemos reaccionar a la preferencia del sistema operativo.

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #111827;
    --texto: #f9fafb;
    --borde: #374151;
  }
}
Copied!

En esta página