¿Qué son las variables CSS (Custom Properties) y por qué son útiles?

Las variables CSS, oficialmente conocidas como «propiedades personalizadas» (Custom Properties), son entidades definidas por los autores de CSS que contienen valores específicos destinados a ser reutilizados a lo largo de un documento.

Se declaran utilizando un nombre personalizado precedido por dos guiones (por ejemplo, --color-primario) y se acceden mediante la función var().

Su utilidad es considerable y aportan múltiples ventajas al desarrollo CSS:

1. Reutilización y mantenimiento (Principio DRY): Permiten definir un valor (como un color, un tamaño de fuente o un espaciado) en un solo lugar. Si necesitas cambiar ese valor, solo lo modificas en la definición de la variable, y el cambio se propagará a todos los lugares donde se utilice. Esto simplifica enormemente el mantenimiento.
2. Legibilidad y semántica: Nombres de variables descriptivos (ej. --color-texto-importante en lugar de un código hexadecimal difícil de recordar) hacen que el código CSS sea más fácil de leer y entender.
3. Temificación sencilla: Facilitan la creación de diferentes temas para un sitio web (por ejemplo, modo claro y oscuro) al permitir cambiar los valores de un conjunto de variables de forma global o específica.
4. Consistencia: Ayudan a mantener la coherencia visual en todo el sitio, asegurando que los mismos valores se utilicen para elementos similares.
5. Flexibilidad: Pueden ser definidas globalmente (normalmente dentro del selector :root) o localmente dentro de un selector específico, y también pueden ser manipuladas con JavaScript.

Ejemplo de uso:

:root {
  --color-principal: #007bff;
  --padding-base: 10px;
}

.boton-primario {
  background-color: var(--color-principal);
  color: white;
  padding: var(--padding-base);
}

.alerta {
  border: 1px solid var(--color-principal);
  padding: var(--padding-base);
}Lenguaje del código: PHP (php)

Si más tarde decides cambiar el --color-principal, todos los elementos que lo usen se actualizarán automáticamente.