Variables CSS

Las variables CSS, también llamadas propiedades personalizadas, permiten almacenar y reutilizar valores dentro de las hojas de estilo. Hacen que el código sea más limpio, mantenible y flexible.

¿Cómo funcionan las variables CSS?

Se recomienda declarar las variables en el selector <:root>, de modo que estén disponibles en todo el documento. Se usan con la función <var()> en los diferentes estilos.

En este ejemplo se muestra cómo declarar y usar variables CSS para configurar el color de fondo y el padding.

Múltiples variables y reutilización

Podemos definir varias variables a la vez, como colores para diferentes botones. Esto simplifica la gestión de temas y la consistencia del diseño.

En este ejemplo se almacenan dos colores en variables, que se aplican a diferentes botones.

Consejos para variables CSS

Las variables CSS ofrecen una solución flexible para gestionar estilos. Aquí algunos consejos útiles:

• Declara siempre las variables globales en <:root> para que estén disponibles en todo el documento.
• Usa nombres descriptivos para las variables para que el código sea más comprensible.
• Emplea variables para esquemas de color y tamaños, de modo que el diseño pueda modificarse fácilmente.