Las variables CSS te permiten guardar valores como colores, fuentes o espaciados en un solo lugar y reutilizarlos en todo tu proyecto. Son útiles cuando trabajas con interfaces grandes donde repetir estilos se vuelve un problema, y donde mantener consistencia visual es clave para escalar sin perder la cabeza.

Imagina que tienes 30 botones con el mismo color de fondo. Sin variables, copias y pegas el hexadecimal en cada uno. Con variables, defines el color una vez y lo llamas donde lo necesites. Si diseño cambia la paleta, modificas un solo valor y todo el proyecto se actualiza solo.

Por qué conviene usar variables en CSS

La razón principal es evitar la repetición de estilos y mantener una línea visual coherente. Cuando trabajas con muchos componentes, es fácil equivocarte con un color o una fuente y generar discrepancias visuales sin darte cuenta.

¿Qué son las variables en CSS? Son valores reutilizables que defines una vez y llamas con var() desde cualquier parte de tu hoja de estilos, ideales para colores, espaciados y tipografías.

Las ventajas concretas que se ven en la clase [00:30] son tres:

• Reutilizas estilos sin duplicar código.
• Mantienes consistencia entre componentes.
• Aplicas cambios globales modificando un solo valor.

Cómo se declaran variables con el pseudoselector :root

Para crear variables globales se usa el pseudoselector :root, que es similar al elemento HTML pero con mayor especificidad. Todo lo que declares dentro de :root queda disponible en el resto del documento CSS [03:15].

La sintaxis usa doble guion antes del nombre de la variable. Así se ve la declaración base del proyecto:

css :root { --color-primary: #3498db; --color-secondary: #2ecc71; --color-danger: #e74c3c; --color-dark: #2c3e50; --color-light: #ecf0f1; --space: 20px; }

Cada variable empieza con --, seguida del nombre que tú elijas y el valor después de los dos puntos. Aquí se definen cinco colores y un espaciado que se reutilizarán en botones y tarjetas.

Cuál es la diferencia entre variables locales y globales

Las variables declaradas en :root son globales, es decir, accesibles desde cualquier selector del CSS. Las variables locales solo viven dentro del selector donde se declaran. Para que el proyecto funcione sin problemas de acceso, conviene declarar las variables compartidas en :root.

Cómo se llaman las variables CSS con var()

Para usar una variable dentro de una propiedad, escribes var() y entre paréntesis pones el nombre de la variable, incluyendo los dos guiones [05:40]. Así se aplican los colores a los botones del proyecto:

css button { padding: 10px 20px; margin: 5px; border: none; cursor: pointer; }

.button-primary { background: var(--color-primary); }

.button-secondary { background: var(--color-secondary); }

.button-danger { background: var(--color-danger); }

El resultado: tres botones con colores distintos, todos alimentados desde la misma fuente. Si más adelante diseño decide cambiar el azul primario, solo modificas --color-primary y los 30 botones que usen esa variable se actualizan al instante.

¿Cómo se usa var() en CSS? Escribes la propiedad seguida de var(--nombre-variable). Por ejemplo: background: var(--color-primary); aplica el valor guardado en esa variable.

Cómo aplicar variables a tarjetas y espaciados

Las variables no son solo para colores. También funcionan con padding, margin, tipografías o cualquier valor que se repita. En la clase se construye una tarjeta usando varias variables al mismo tiempo:

css .card { background: var(--color-light); color: var(--color-dark); padding: var(--space); margin: 10px 0; border-radius: 5px; }

La tarjeta toma su fondo claro, su color de texto oscuro y su padding desde variables. Esto permite que, si decides cambiar el espaciado base del proyecto de 20px a 24px, todos los componentes que usen --space se ajusten al mismo tiempo.

Cómo sobrescribir variables CSS dentro de una clase

A veces necesitas que un solo elemento tenga una variación sin afectar al resto. En lugar de crear nuevas clases o duplicar estilos, puedes redefinir el valor de una variable dentro de una clase específica [11:20].

css .card-dark { --color-light: blue; --color-dark: white; }

Esta clase no cambia el valor global de --color-light, solo lo reescribe para el elemento que tenga card-dark. La tarjeta hereda los estilos de .card, pero los valores de las variables se sustituyen localmente.

¿Se puede cambiar una variable CSS solo en un elemento? Sí. Redefines la variable dentro del selector específico y el cambio aplica solo a ese contexto, sin afectar al resto del proyecto.

Este patrón es útil cuando reutilizas una clase base y quieres una variante puntual sin romper el sistema. Mantienes la estructura, cambias el detalle, y tu CSS sigue siendo escalable.

¿En qué parte de tu proyecto vas a aplicar variables primero, en los colores o en los espaciados? Cuéntame en los comentarios.