¿Qué son las propiedades personalizadas de CSS (variables)?

Question

Accepted Answer

**Las propiedades personalizadas de CSS** (variables) te permiten almacenar valores una sola vez y reutilizarlos. A diferencia de las variables de preprocesador (Sass), son **activas en tiempo de ejecución** — se heredan en cascada y pueden cambiarse con JavaScript o media queries.

```css
:root {                 /* :root = the html element → global scope */
  --color-primary: #3b82f6;
  --spacing: 1rem;
  --radius: 8px;
}

.button {
  background: var(--color-primary);   /* use with var() */
  padding: var(--spacing);
  border-radius: var(--radius);
}
```

## Valores de respaldo

```css
color: var(--text-color, black); /* use black if --text-color isn't defined */
```

## Se heredan en cascada y pueden redefinirse/anularse

```css
.card { --padding: 1rem; }
.card.compact { --padding: 0.5rem; } /* override locally — children using var() update */
```

Porque se heredan, una variable definida en un elemento padre está disponible para todos los descendientes y puede anularse en un subárbol — algo que las variables de Sass (que se compilan) no pueden hacer.

## Por qué es importante

```css
:root { --bg: white; --text: black; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; } /* redefine the SAME vars for dark mode */
}
body { background: var(--bg); color: var(--text); }
```

Cambia un tema completo redefiniendo un puñado de variables — sin reglas duplicadas. También puedes hacerlo en JS:

```js
document.documentElement.style.setProperty("--color-primary", "#e11d48");
```

Esto actualiza instantáneamente cada elemento que usa esa variable — imposible con variables de Sass compiladas.

Las variables de CSS son la base de los **temas modernos y design tokens**: define colores/espacios una sola vez, reutilízalos en todas partes y cambia los temas (modo oscuro, variantes de marca) en tiempo de ejecución mediante media queries o JavaScript.

Traen DRY y valores dinámicos a CSS simple — sin pasos de compilación requeridos.