En un proyecto web, es común que ciertos valores, como colores, tamaños de fuente o márgenes, se repitan en varias partes del código. Mantener todo consistente puede ser complicado,  especialmente cuando los proyectos crecen y se vuelven más complejos. Las CSS Variables ofrecen una forma práctica de gestionar valores reutilizables, como colores, tamaños de fuente o márgenes, ayudando a simplificar el mantenimiento y mejorar la organización del código.

¿Qué son las CSS Custom Properties (o variables CSS)?

Las CSS Variables, también conocidas como CSS Custom Properties, son una herramienta que permite almacenar valores reutilizables en el archivo de estilos. En lugar de repetir los mismos valores en múltiples lugares, puedes definir una variable con un nombre descriptivo que represente ese valor. Esto facilita la lectura y el mantenimiento del código.

Por ejemplo, si en un proyecto utilizas un color azul específico como color principal, en lugar de escribir el valor hexadecimal cada vez, puedes definir una variable como --color-primario y usarla donde sea necesario. Si decides cambiar ese color, solo necesitas actualizar la variable, y los cambios se reflejarán automáticamente en todas las partes del proyecto que la usen.

Cómo Declarar y Usar CSS Variables

Las CSS Variables se definen utilizando un prefijo -- seguido de un nombre descriptivo. Para acceder a ellas, se utiliza la función var(). Es común declararlas en el selector :root, que representa el nivel más alto del árbol DOM, haciendo que las variables estén disponibles globalmente.

:root {
  --color-primario: #3498db;
  --font-size-base: 16px;
  --spacing-base: 1rem;
}

body {
  color: var(--color-primario);
  font-size: var(--font-size-base);
  margin: var(--spacing-base);
}

En este caso, --color-primario, --font-size-base y --spacing-base son las variables definidas. Si decides cambiar el color principal, solo necesitas modificar --color-primario en el: root.

Otro ejemplo puede ser si un proyecto grande, quieres organizar o agrupar por categorías comunes: colores, tipografías, espaciado, etc.

:root {
  --color-primario: #3498db;
  --color-secundario: #2ecc71;
  --color-fondo: #f5f5f5;
  --color-texto: #333;
  --color-acento: #e74c3c;
}

:root {
  --font-family-base: 'Arial', sans-serif;
  --font-size-small: 14px;
  --font-size-medium: 16px;
  --font-size-large: 20px;
  --line-height-base: 1.5;
}

:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
} 

Ejemplo práctico de como usarlas

Vamos a usar un proyecto básico de una calculadora, lo tenemos en tres archivos index.html, script.js y styles.css

Como podemos ver en la imagen tenemos el CSS sencillo, vamos a hacer variables para tema claro y oscuro. 

Vamos a actualizar el archivo styles.css, iniciamos definiendo los colores en el selector :root para el tema claro y [data-theme="dark"] para el tema oscuro:

:root {
  --background-color: #f0f0f0;
  --calculator-bg: #333;
  --display-bg: #222;
  --text-color: #000;
  --button-bg: #444;
  --button-hover-bg: #555;
  --button-clear-bg: #f44336;
  --button-clear-hover-bg: #d32f2f;
}

[data-theme="dark"] {
  --background-color: #181818;
  --calculator-bg: #222;
  --display-bg: #333;
  --text-color: #fff;
  --button-bg: #555;
  --button-hover-bg: #666;
  --button-clear-bg: #e57373;
  --button-clear-hover-bg: #f44336;
} 

Luego establecemos en los selectores las variables

body {
  background-color: var(--background-color);
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Arial, sans-serif;
}
#display {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 20px;
  text-align: right;
  border: none;
  border-radius: 5px;
  background-color: var(--display-bg);
  color: var(--text-color);
}

Como se observa en la siguiente imagen en el selector agregamos la variable ya establecida. 

Adicionalmente, le agregamos un botón para cambiar de tema, podrás encontrar este código en el siguiente repositorio, si deseas practicar  Calculadora

Beneficios de Usar CSS Variables

• Consistencia en el diseño: Al centralizar valores clave en variables, se asegura que los mismos estilos se apliquen de manera uniforme en todo el proyecto.

• Facilidad de mantenimiento: Un cambio en el valor de una variable se propaga automáticamente a todos los elementos que la usan, reduciendo la posibilidad de errores.

• Flexibilidad en tiempo real: Con CSS Variables puedes actualizar estilos dinámicamente usando JavaScript, lo que permite crear experiencias personalizadas como temas oscuros o configuraciones adaptativas.

• Compatibilidad con el modelo en cascada: Las variables respetan la jerarquía de CSS, lo que permite sobrescribir valores a nivel local si es necesario.

• Organización y claridad: Agrupar variables relacionadas facilita la lectura del código y ayuda a encontrar rápidamente lo que necesitas cambiar.

Buenas Prácticas al Usar CSS Variables

• Nombres descriptivos: Usa nombres que expliquen claramente el propósito de cada variable. Por ejemplo, --color-primario es más claro que --cp.

• Evita la sobrecarga: No declares variables para cada propiedad; úsalas solo donde sean necesarias y recurrentes.

• Documentación interna: Agrega comentarios en el archivo CSS para explicar grupos de variables y su uso.

• Combina con preprocesadores: Aunque CSS Variables son útiles por sí solas, puedes combinarlas con preprocesadores como Sass para aprovechar funcionalidades adicionales.

Las CSS Variables son una herramienta interesante que permite lograr consistencia, flexibilidad y un mejor mantenimiento en los estilos de un proyecto web. Implementarlas correctamente requiere algo de práctica, pero los beneficios en términos de organización y eficiencia pueden ser significativos, especialmente en proyectos a gran escala.