Variables en CSS con :root
Desde CSS3 es posible definir variables que pueden usarse en cualquier parte del documento. Esto permite mantener el código más limpio, fácil de mantener y consistente, especialmente cuando se repiten colores, tamaños o valores comunes.
Definir variables
Las variables se definen dentro de un selector, normalmente :root, para que estén disponibles globalmente:
:root {
--color-principal: #0077cc;
--tamano-texto: 16px;
}:root representa el elemento <html> y garantiza que las variables sean accesibles desde cualquier lugar del CSS.
Usar variables
Se usan con la función var():
body {
color: var(--color-principal);
font-size: var(--tamano-texto);
}Puedes incluir un valor alternativo si la variable no está definida:
h1 {
color: var(--color-secundario, black);
}Variables locales
Las variables también pueden definirse dentro de un selector para ser usadas solo en ese contexto:
.alerta {
--color-principal: red;
color: var(--color-principal);
}En este caso, si un elemento está dentro de .alerta, usará el valor local. Si no, usará el global definido en :root.
Actualizar variables con JavaScript
Es posible cambiar el valor de una variable CSS desde JavaScript:
<script>
document.documentElement.style.setProperty('--color-principal', 'green');
</script>Ventajas de usar variables
- Evita repetir valores (ej. colores corporativos).
- Permite cambiar fácilmente un tema entero.
- Facilita el mantenimiento y el trabajo en equipo.
- Compatible con media queries y pseudoestados.
Buenas prácticas
Usa nombres claros, preferiblemente en inglés y con guiones: --primary-color, --spacing-unit.
Define variables globales en :root y variables específicas en componentes si es necesario.
No abuses: no conviertas cada valor en una variable. Usa variables para los que realmente cambian o se reutilizan.
Valores universales: Las propiedades que usan var() pueden combinarse con initial, inherit y unset.
Compatibilidad: Las variables CSS están soportadas en todos los navegadores modernos, pero no en IE.