Info Variable CSS usada sin valor de respaldo
Por qué var(--nombre, respaldo) es más seguro que var(--nombre) solo, y qué pasa cuando una propiedad personalizada no está definida.
El validador marca una llamada var(--propiedad-personalizada) sin un segundo argumento — el valor de respaldo que se usa si la propiedad personalizada no está definida en ese punto de la cascada.
Ejemplo
/* Sin respaldo — inválido si --color-marca no está definida */
.boton { color: var(--color-marca); }
/* Con un respaldo */
.boton { color: var(--color-marca, #2563eb); }Por qué importa
Las propiedades personalizadas (variables CSS) pueden estar indefinidas por razones que no tienen nada que ver con un error de tipeo — un componente se puede reutilizar en una página que nunca definió una variable de tema, un paso del build puede eliminar un bloque :root sin usar, o la variable puede estar definida solo detrás de una media query que no está activa. Cada vez que var() se resuelve a nada, toda la declaración se vuelve inválida en el momento del valor computado — la propiedad recae en su valor heredado, o en su valor inicial si no hereda nada, en vez de simplemente "no hacer nada". Un respaldo (var(--nombre, valor)) garantiza un resultado sensato en cualquier caso, lo cual importa más para propiedades donde heredar o reiniciar al valor inicial se vería visiblemente roto (colores, espaciado, tamaños).
Frequently asked questions
¿Un respaldo siempre es necesario?
No siempre — si una propiedad personalizada está garantizada de estar definida globalmente (por ejemplo, definida una vez en :root y nunca de forma condicional), un respaldo es solo redundancia defensiva. Importa más para variables a nivel de componente que un consumidor razonablemente podría olvidar definir.
¿El respaldo mismo puede ser otro var()?
Sí — var(--a, var(--b, red)) es válido y encadena respaldos, resolviendo a --a si está definida, si no a --b si esa está definida, y si no, a red.