Las propiedades personalizadas de CSS, comúnmente conocidas como variables CSS, representan la característica más potente de CSS moderno para construir hojas de estilo mantenibles y tematizables. A diferencia de las variables de Sass o LESS que se compilan y desaparecen, las propiedades personalizadas CSS están vivas en el navegador, pueden tener un alcance específico para cualquier elemento, responden a consultas de medios y pueden modificarse dinámicamente con JavaScript.

Sintaxis Básica

Definición y Uso de Propiedades Personalizadas
/* Definir en :root para alcance global */
:root {
  --color-primario: #6366f1;
  --color-fondo: #0f172a;
  --color-texto: #e2e8f0;
  --radio: 12px;
  --sombra: 0 4px 24px rgba(0, 0, 0, 0.3);
  --fuente-sans: 'Inter', system-ui, sans-serif;
}

/* Usar con var() */
.tarjeta {
  background: var(--color-fondo);
  color: var(--color-texto);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  font-family: var(--fuente-sans);
}

/* Valor de respaldo */
.tarjeta {
  color: var(--color-texto, #ffffff);
}

Alcance y Herencia

Las propiedades personalizadas siguen la cascada de CSS y son heredadas por los elementos hijos. Esto las hace perfectas para la tematización a nivel de componente.

Variables con Alcance Definido
/* Valores predeterminados globales */
:root {
  --btn-fondo: #6366f1;
  --btn-texto: #ffffff;
  --btn-radio: 8px;
}

/* Sobrescribir para una sección específica */
.zona-peligro {
  --btn-fondo: #ef4444;
  --btn-texto: #ffffff;
}

/* El componente de botón utiliza los mismos nombres de variable */
.btn {
  background: var(--btn-fondo);
  color: var(--btn-texto);
  border-radius: var(--btn-radio);
}

/* Los botones dentro de .zona-peligro se vuelven rojos automáticamente */

Modo Oscuro con Propiedades Personalizadas

Tema Claro y Oscuro
/* Tema claro (predeterminado) */
:root {
  --fondo: #ffffff;
  --fondo-secundario: #f8fafc;
  --texto: #1e293b;
  --texto-muted: #64748b;
  --borde: #e2e8f0;
  --acento: #6366f1;
}

/* Tema oscuro */
[data-theme="dark"] {
  --fondo: #0f172a;
  --fondo-secundario: #1e293b;
  --texto: #e2e8f0;
  --texto-muted: #94a3b8;
  --borde: rgba(255, 255, 255, 0.1);
  --acento: #818cf8;
}

/* Detección de preferencia del sistema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0f172a;
    --fondo-secundario: #1e293b;
    --texto: #e2e8f0;
    --texto-muted: #94a3b8;
    --borde: rgba(255, 255, 255, 0.1);
    --acento: #818cf8;
  }
}

Integración con JavaScript

Lectura y Escritura de Variables CSS en JS
// Leer una variable CSS
const acento = getComputedStyle(document.documentElement)
  .getPropertyValue('--acento').trim();

// Establecer una variable CSS
document.documentElement.style.setProperty('--acento', '#10b981');

// Alternancia de tema
function alternarTema() {
  const actual = document.documentElement.dataset.theme;
  document.documentElement.dataset.theme = actual === 'dark' ? 'light' : 'dark';
  localStorage.setItem('theme', document.documentElement.dataset.theme);
}

Sistema de Tokens de Diseño

Escala de Espaciado y Tipografía
:root {
  /* Escala de espaciado */
  --espacio-1: 0.25rem;   /* 4px */
  --espacio-2: 0.5rem;    /* 8px */
  --espacio-3: 0.75rem;   /* 12px */
  --espacio-4: 1rem;      /* 16px */
  --espacio-6: 1.5rem;    /* 24px */
  --espacio-8: 2rem;      /* 32px */
  --espacio-12: 3rem;     /* 48px */

  /* Tamaños de fuente */
  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-base: 1rem;
  --texto-lg: 1.125rem;
  --texto-xl: 1.25rem;
  --texto-2xl: 1.5rem;
  --texto-3xl: 1.875rem;

  /* Tamaños de fuente responsivos */
  --texto-hero: clamp(2rem, 5vw, 3.5rem);
}

Mejores Prácticas

  • Usa nombres semánticos — --color-primario en lugar de --azul-500. Esto te permite cambiar el color real sin renombrar.
  • Define todos los tokens de diseño en :root para una consistencia global.
  • Define variables específicas de componentes con alcance al selector del componente.
  • Proporciona siempre valores de respaldo para propiedades críticas: var(--color, #000).
  • Usa propiedades personalizadas para todo lo que puedas necesitar cambiar — colores, espaciado, fuentes, sombras, radio de borde, duraciones de animación.

Prueba Nuestras Herramientas CSS Gratuitas

Minifica y formatea tu código CSS instantáneamente.