Las variables CSS (o custom properties) son de lo más útil que puedes aprender: defines un valor una vez —un color, un espaciado, una fuente— y lo reutilizas en todo el CSS. Si lo cambias en un sitio, cambia en toda la web. Te lo explico paso a paso con código para copiar, hasta montar un modo oscuro.
Qué son y cómo se declaran
Una variable CSS empieza por -- y se declara dentro de un selector. Lo habitual es hacerlo en :root (la raíz del documento) para que esté disponible en toda la página.
:root {
--color-principal: #1a56db;
--espaciado: 16px;
--fuente: "Inter", sans-serif;
}Cómo usarlas: la función var()
Para usar una variable, la llamas con var(). Así centralizas los valores de tu diseño en un solo sitio.
.boton {
background: var(--color-principal);
padding: var(--espaciado);
font-family: var(--fuente);
}Valor de reserva (fallback)
Puedes pasar un segundo valor a var() por si la variable no existe. Es una red de seguridad.
.tarjeta {
color: var(--color-texto, #333);
}Ámbito: variables locales
Si declaras una variable dentro de un selector, solo vive ahí y en sus hijos. Útil para variar un componente sin tocar el resto.
.alerta {
--color-principal: #d64545; /* solo dentro de .alerta */
border-color: var(--color-principal);
}Combinar con calc()
Las variables se llevan de maravilla con calc() para escalar espaciados o tamaños de forma coherente.
.seccion {
padding: calc(var(--espaciado) * 2);
}El caso estrella: modo oscuro
Aquí brillan de verdad. Defines las variables de color y las rediefines para el tema oscuro; toda la web se adapta cambiando un atributo.
:root {
--fondo: #ffffff;
--texto: #1a1a1a;
}
[data-theme="oscuro"] {
--fondo: #111111;
--texto: #f2f2f2;
}
body {
background: var(--fondo);
color: var(--texto);
}Con un poco de JavaScript cambias data-theme y listo: no hace falta reescribir estilos, solo cambian las variables.
Por qué usar variables CSS
- Cambias el diseño desde un único sitio (adiós a buscar y reemplazar colores).
- Facilitan temas y modo oscuro.
- Se pueden leer y modificar con JavaScript en tiempo real.
- Son la base de un sistema de diseño (design tokens).
Más CSS en el blog
Preguntas frecuentes
¿Dónde se declaran las variables CSS?
Normalmente en :root, para que estén disponibles en toda la web. También puedes declararlas en cualquier selector para un uso local.
¿Se pueden cambiar con JavaScript?
Sí: element.style.setProperty('--color', '#fff'). Por eso son ideales para temas y modo oscuro.
¿Son compatibles con todos los navegadores?
Sí, todos los navegadores modernos las soportan desde hace años. Puedes usarlas sin miedo.
Empieza definiendo tus colores y espaciados en :root y ve sustituyendo los valores repetidos por variables. Tu CSS quedará más limpio y fácil de mantener.
