Variables CSS para optimizar y reutilizar estilos

Clase 11 de 34 • Curso de CSS Avanzado y Responsive Design

Clase anteriorSiguiente clase

Resumen

Las variables en CSS te permiten optimizar tu código, facilitando cambios globales mediante una sola línea. Esta potente herramienta evita la repetición innecesaria, ahorra tiempo y esfuerzo, y mejora ostensiblemente el control de proyectos que podrían escalar.

¿Qué son y para qué sirven las variables en CSS?

Las variables en CSS son elementos que almacenan valores específicos como colores, tamaños de fuente o familias tipográficas, que puedes reutilizar en diferentes partes del código. Al modificar una variable en un único lugar, generas cambios automáticos y globales en todo tu proyecto, simplificando considerablemente su mantenimiento y actualización.

¿Cómo definir variables en CSS?

La manera recomendada de definir variables en CSS es mediante el selector :root, seguido de un nombre precedido por dos guiones (--):

:root {
  --principal: blue;
  --secundario: green;
  --tamano-grande: 2rem;
  --tamano-pequeno: 1rem;
  --fuente-titulo: Arial, sans-serif;
  --fuente-parrafo: Georgia, serif;
}

Esto permite manejar desde colores sencillos hasta configuraciones más complejas, como tipos de fuente y tamaños.

¿Cómo utilizar estas variables en tus estilos?

Una vez definidas las variables, puedes aplicarlas en tus elementos CSS utilizando la función var():

h1 {
  color: var(--principal);
  font-size: var(--tamano-grande);
  font-family: var(--fuente-titulo);
}

p {
  color: var(--secundario);
  font-size: var(--tamano-pequeno);
  font-family: var(--fuente-parrafo);
}

Al guardar el archivo, los cambios se aplicarán inmediatamente.

¿Cuáles son las ventajas de usar variables en CSS?

Las ventajas de usar variables son variadas y prácticas:

  • Evitas código replicado innecesariamente.
  • Reduces el tiempo asignado a realizar modificaciones.
  • Mantienes más control sobre estilos comunes.
  • Facilitas actualizaciones globales simultáneas en proyectos grandes.

¿Te interesa profundizar más sobre CSS avanzado? Comenta tus experiencias o dudas, estamos aquí para seguir aprendiendo juntos.