Variables CSS y arquitectura modular

¿Qué son las Variables CSS?

Las Variables CSS, también conocidas como Custom Properties, son valores que definimos una vez y usamos en múltiples lugares de nuestra hoja de estilos. Imagina que son como cajas donde guardas colores, tamaños o cualquier valor que necesites repetir.

La sintaxis es simple: un nombre precedido por dos guiones (--) y un valor. Para usarlas, utilizas la función var(--nombre-variable).

:root {
  --color-primario: #3498db;
  --color-secundario: #2ecc71;
  --espaciado-base: 16px;
  --tamano-fuente: 1rem;
}

button {
  background-color: var(--color-primario);
  padding: var(--espaciado-base);
  font-size: var(--tamano-fuente);
}

¿Por qué usar Variables CSS?

Las Variables CSS te permiten:

1. Reutilización: Define un valor, úsalo infinite veces.
2. Mantenimiento: Cambia una vez, actualiza en todas partes.
3. Consistencia: Asegura que los mismos valores se usen uniformemente.
4. Temas: Facilita crear temas claros y oscuros cambiando solo los valores.
5. Legibilidad: Tu código es más fácil de entender y mantener.

Sintaxis y Uso Básico

Para declarar una variable CSS, usa cualquier selector. Sin embargo, la convención es usar :root para variables globales:

:root {
  --mi-color: #ff6b6b;
  --mi-espaciado: 20px;
  --mi-familia: 'Segoe UI', sans-serif;
}

/* También puedes definir variables en selectores específicos */
.card {
  --card-padding: 24px;
  padding: var(--card-padding);
}

/* Fallback cuando la variable no existe */
.elemento {
  color: var(--mi-color, #000000);
}

Arquitectura Modular con Variables CSS

La arquitectura modular es un enfoque de desarrollo donde separas tu código en bloques independientes y reutilizables. Las variables CSS son fundamentales para crear esta arquitectura.

El Enfoque ITCSS

ITCSS (Inverted Triangle CSS) es una metodología que organiza tu CSS en capas desde lo más genérico hasta lo más específico:

1. Settings: Variables, configuraciones globales.
2. Tools: Mixins, funciones (si usas preprocesadores).
3. Generic: Reset, normalización.
4. Base: Estilos de elementos HTML.
5. Objects: Patrones reutilizables sin estilos visuales.
6. Components: Componentes específicos con estilos.
7. Utilities: Clases de utilidad.

/* ===== SETTINGS ===== */
:root {
  /* Colores */
  --color-brand: #6366f1;
  --color-brand-dark: #4f46e5;
  --color-text: #1f2937;
  --color-background: #ffffff;
  
  /* Espaciado */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  
  /* Tipografía */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --line-height: 1.5;
  
  /* Bordes */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* ===== COMPONENTE BUTTON ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: var(--line-height);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn--primary {
  background-color: var(--color-brand);
  color: white;
}

.btn--primary:hover {
  background-color: var(--color-brand-dark);
  transform: translateY(-1px);
}

Temas con Variables CSS

Una de las ventajas más poderosas de las variables CSS es la capacidad de implementar temas fácilmente:

:root {
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
  --surface-color: #f5f5f5;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f5f5f5;
  --surface-color: #2d2d2d;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.card {
  background-color: var(--surface-color);
}

<!-- En tu HTML -->
<button onclick="toggleTheme()">Cambiar Tema</button>

<script>
function toggleTheme() {
  const current = document.documentElement.getAttribute('data-theme');
  document.documentElement.setAttribute(
    'data-theme',
    current === 'dark' ? 'light' : 'dark'
  );
}
</script>

Variables CSS con Componentes

Las variables de componentes permiten personalizar componentes desde el HTML sin crear nuevas clases:

.card {
  /* Variables con valores por defecto */
  --card-padding: 24px;
  --card-bg: #ffffff;
  --card-radius: 12px;
  
  padding: var(--card-padding);
  background: var(--card-bg);
  border-radius: var(--card-radius);
}

/* Personalización desde HTML */
.card--featured {
  --card-padding: 40px;
  --card-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --card-radius: 20px;
}

<div class="card">
  <h3>Tarjeta Normal</h3>
  <p>Usa los valores por defecto</p>
</div>

<div class="card card--featured">
  <h3>Tarjeta Destacada</h3>
  <p>Personalizada con variables</p>
</div>

Ejemplo Práctico: Sistema de Diseño Completo

/* ============================
   SISTEMA DE DISEÑO BÁSICO
   ============================ */

:root {
  /* Tokens de color */
  --indigo-50: #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-900: #312e81;
  
  /* Tokens semánticos */
  --color-primary: var(--indigo-600);
  --color-primary-hover: var(--indigo-500);
  --color-text: var(--indigo-900);
  --color-bg: var(--indigo-50);
  
  /* Tokens de espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  
  /* Tokens de tipografía */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  
  /* Tokens de sombra */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  
  /* Tokens de animación */
  --transition-fast: 150ms;
  --transition-base: 300ms;
  --transition-slow: 500ms;
}

/* Aplicando tokens */
body {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: 600;
  color: white;
  background-color: var(--color-primary);
  border-radius: var(--space-2);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
}

.button:hover {
  background-color: var(--color-primary-hover);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

// Cambiar variable CSS con JavaScript
document.documentElement.style.setProperty('--color-primary', '#ff0000');

// Leer variable CSS
const color = getComputedStyle(document.documentElement)
  .getPropertyValue('--color-primary');
console.log(color); // #ff0000

Organización de Archivos

Para proyectos más grandes, organiza tus archivos de esta manera:

/* main.css */
@import 'tokens.css';
@import 'reset.css';
@import 'base.css';
@import 'components.css';
@import 'layout.css';
@import 'utilities.css';

Las Variables CSS transforman tu CSS de una colección de valores repetidos a un sistema de diseño coherente y mantenible.

Resumen y Próximos Pasos

Has aprendido conceptos fundamentales sobre Variables CSS y arquitectura modular:

1. Las Variables CSS se declaran con --nombre: valor y se usan con var(--nombre).
2. Usa :root para variables globales que aplicarán en todo el documento.
3. Crea tokens semánticos que representen decisiones de diseño.
4. Implementa temas cambiando los valores de las variables.
5. Usa variables en componentes para facilitar su personalización.
6. Organiza tu CSS siguiendo metodologías como ITCSS para mejor mantenibilidad.