Cuando un proyecto crece, mantener la coherencia visual se vuelve un reto. Colores que no coinciden, tamaños de fuente que varían sin razón y código repetido por todas partes son problemas comunes. Las custom properties de CSS, también conocidas como variables, resuelven exactamente eso: permiten guardar un valor una sola vez y reutilizarlo en todo el proyecto sin copiar ni pegar.
¿Qué son las variables en CSS y por qué deberías usarlas?
Las variables en CSS funcionan de manera similar a las variables en lenguajes de programación como JavaScript. La idea es simple: guardas un valor y lo reutilizas en distintas partes de tus estilos. Esto evita que tengas que recordar códigos hexadecimales de colores o tamaños específicos de fuente cada vez que los necesitas.
El beneficio principal aparece cuando trabajas con proyectos reales donde existe una gama de colores definida: un color principal que aparece en el logo y las fuentes destacadas, y colores secundarios que generan contraste. Sin variables, cada vez que necesitas aplicar ese color debes escribir el valor exacto, lo que abre la puerta a errores y discrepancias.
¿Cómo se declaran las custom properties dentro de root?
Para declarar variables se utiliza el selector :root [2:50], que hace referencia al elemento HTML del documento, es decir, la raíz o punto de partida del proyecto. Todas las variables se definen dentro de este selector.
La sintaxis para crear una variable requiere dos guiones seguidos del nombre de la variable:
css
:root {
--primary-color: #003476;
--secondary-color: #42F7;
--header-size: 100%;
--font: 1.8rem;
}
Cada variable almacena un valor que puede ser un color, un tamaño o cualquier valor válido en CSS. Los nombres deben ser descriptivos para que cualquier persona entienda qué representan.
¿Cómo se aplican las variables con la función var?
Para utilizar una variable en cualquier propiedad se emplea la función var() seguida del nombre de la variable tal como fue declarada [3:30]:
css
header {
width: 100vw;
height: 15vh;
background-color: var(--primary-color);
}
h1 {
font-size: var(--header-size);
color: var(--primary-color);
}
footer {
width: 100vw;
height: 15vh;
background-color: var(--secondary-color);
}
main {
width: 100vw;
height: 70vh;
font-size: var(--font);
}
Es importante cuidar la sintaxis: punto y coma al final de cada declaración y los dos guiones antes del nombre de la variable dentro de var(). Un error frecuente es colocar dos puntos en lugar de punto y coma, lo que impide que el estilo se aplique correctamente [4:20].
¿Qué prácticas básicas se aplican en la estructura del proyecto?
Antes de trabajar con variables, se establecen prácticas fundamentales que siempre deben estar presentes:
- El selector universal con
box-sizing: border-box, margin: 0 y padding: 0 para resetear estilos por defecto.
- El font-size de 62.5% en el elemento HTML para que un
rem equivalga a diez píxeles [1:10].
- La herencia de fuentes: al definir un
font-size en el main, las etiquetas hijas como p heredan automáticamente ese tamaño.
- Una estructura semántica con
header, main, section y footer para organizar el contenido correctamente.
¿Cuándo se aprovechan más las variables en CSS?
El verdadero valor de las custom properties se percibe cuando el proyecto escala. Imagina un HTML extenso con decenas de componentes que comparten colores y tipografías. Sin variables, es fácil que el color de fondo de un elemento no coincida con el de otro, o que los tamaños de fuente empiecen a variar sin intención.
Con variables puedes definir desde el inicio:
- Color primario, secundario y terciario.
- Tamaños de fuente para párrafos y encabezados.
- Dimensiones reutilizables como anchos y altos.
De esta forma, si el color principal cambia, solo modificas una línea en :root y el cambio se refleja en todo el proyecto. Esto elimina la discrepancia y reduce significativamente el código repetido.
¿Ya estás usando variables en tus proyectos? Comparte qué beneficios has encontrado al implementarlas en tu flujo de trabajo.
