CSS Custom Properties (variables CSS) han cambiado fundamentalmente cómo escribimos y mantenemos hojas de estilo. A diferencia de las variables de preprocesadores, son dinámicas, participan en la cascada y la herencia.

Gestión de design tokens

:root { --color-primary-500: #3b82f6; --space-md: 1rem; --font-sans: "Inter", system-ui, sans-serif; }

Usa nomenclatura BEM-inspirada: --bloque__elemento--modificador para tokens de componente y --categoria-propiedad-variante para globales.

Cambio de tema

Define tema claro en :root y sobreescribe en [data-theme="dark"]. Añade prefers-color-scheme para respetar la preferencia del sistema.

Manipulación en tiempo de ejecución

root.style.setProperty("--spacing", `${valor}px`);

Permite control de espaciado por el usuario, temas dinámicos, animaciones basadas en scroll.

Herencia y Shadow DOM

Las custom properties penetran el Shadow DOM, siendo el mecanismo estándar para temar web components.

Integración con preprocesadores

Preprocesadores destacan en tiempo de compilación (math, mixins); custom properties destacan en dinamismo en tiempo de ejecución.