CSS
Uso de custom properties y var() para crear valores reutilizables, fallbacks, tokens, temas y APIs de componentes que participan en la cascada.
Una custom property guarda tokens que participan en la cascada y se sustituyen mediante .
var():root {
--brand: oklch(62% 0.2 285);
}
.button {
background: var(--brand);
}.card {
--surface: white;
}
.card__body {
background: var(--surface);
}Las custom properties con sintaxis --* heredan por defecto.
color: var(--text-color, #222);El fallback se usa cuando la property está ausente o inválida en el momento de sustitución.
Puede anidarse:
color: var(--text-color, var(--fallback-color, #222));:root {
--size: ;
}Una property puede existir con una secuencia vacía. No es igual a estar ausente.
.card {
--space: red;
padding: var(--space);
}La sustitución produce un valor inválido para padding y la declaración queda inválida en computed-value time.
:root {
--a: var(--b);
--b: var(--a);
}El ciclo invalida los valores implicados.
.button {
--button-bg: var(--brand);
--button-text: white;
background: var(--button-bg);
color: var(--button-text);
}
.button[data-variant="ghost"] {
--button-bg: transparent;
--button-text: var(--brand);
}La variante cambia configuración, no repite todas las declaraciones.
:root {
--space: 1rem;
}
.card {
padding: calc(var(--space) * 1.5);
}La property conserva tokens; la función consumidora decide el tipo válido.
Custom properties no registradas suelen animarse de forma discreta.
Con @property:
@property --progress {
syntax: "<number>";
inherits: false;
initial-value: 0;
}El navegador conoce tipo, herencia e initial value, permitiendo interpolación cuando corresponde.
El descriptor syntax debe coincidir con una gramática válida. Registrar demasiadas properties sin necesidad añade complejidad; úsalo para animación, validación o control de herencia.
:root {
--surface: white;
--text: #161616;
}
[data-theme="dark"] {
--surface: #161616;
--text: white;
}Los componentes consumen tokens semánticos, no colores hardcoded.
root.style.setProperty("--progress", String(progress));Útil para conectar estado continuo con CSS. No conviertas cada valor de layout en mutación JS si puede resolverse declarativamente.
var() realiza sustitución con fallback opcional.@property registra sintaxis, herencia e initial value.¿Por qué --space: red no produce error hasta usarlo en padding?
Porque la custom property conserva tokens sin validar contra padding; la declaración consumidora se invalida cuando la sustitución no forma un valor permitido.
Valores, tipos y unidades explica qué clases de datos aceptan las propiedades.