Variables CSS

Las variables de CSS son la forma más simple y robusta de asegurar consistencia visual, acelerar cambios globales y evitar repetir código. Con el pseudoselector :root y la función var() puedes centralizar colores, espacios y tipografías, y escalar sin dolor proyectos con decenas de botones o tarjetas.

¿Por qué usar variables CSS para escalar proyectos?

Las variables permiten definir un valor una sola vez y reutilizarlo en todo el CSS. Así evitas copiar y pegar, mantienes una línea visual coherente y haces cambios globales en segundos. Si diseño cambia la paleta, editas la variable y todo se actualiza de forma automática.

• Reducen repetición de estilos y errores humanos.
• Mantienen colores y fuentes consistentes.
• Hacen cambios globales desde un solo lugar.
• Mejoran el mantenimiento y tu salud mental.

¿Qué problemas resuelven las variables CSS?

• Botones repetidos con el mismo background, padding y margin.
• Discrepancias por recordar mal un color o una fuente.
• Dificultad para actualizar paletas o espacios en muchos componentes.

¿Cómo declarar y usar variables con :root y var?

El pseudoselector :root actúa como un contenedor global con mayor especificidad que html. Define ahí variables para que todo el documento pueda usarlas. La sintaxis: dos guiones, nombre y valor; luego consume con var().

¿Cómo se declaran variables globales en :root?

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

¿Cómo se aplican en botones y tarjetas reutilizables?

Define estilos base del button y luego variantes que solo cambian el color de fondo con var().

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); }

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

Claves prácticas: - Usa :root para variables globales. - Nombra claro: por ejemplo, --color-primary, --space. - Centraliza cambios: cambia el valor en la variable y listo. - Extiende con variaciones ligeras, como hover si lo necesitas.

¿Cómo reescribir variables por componente sin romper estilos globales?

Cuando un elemento necesita una variante específica, no dupliques reglas. Mantén la clase base y agrega una segunda clase que reescriba el valor de la variable solo en ese contexto. Así cambias el estilo local sin tocar el valor global.

¿Cómo sobreescribir variables en una clase compuesta?

En el HTML se usa algo como class="card card-dark". La clase card define el estilo general y card-dark solo ajusta variables.

/* card base usa var(--color-light) como fondo y var(--color-dark) como texto */
.card {
  background: var(--color-light);
  color: var(--color-dark);
}

/* esta variante reescribe los valores para esta tarjeta en particular */
.card.card-dark {
  --color-light: blue;  /* fondo localmente azul */
  --color-dark: white;  /* texto localmente blanco */
}

Beneficios de esta técnica: - Evita duplicar reglas de background y color. - Cambia solo ese componente sin afectar a los demás. - Mantiene las clases reutilizables y fáciles de mantener.

Si te resultó útil, comparte qué variables globales agregarías a tu proyecto y comenta tus dudas sobre :root o var().