Apuntes sobre Html2

Cuando uno enseña, dos aprenden.

Variables CSS

¿Qué son las variables CSS?

Las variables CSS (formalmente llamadas custom properties) permiten guardar un valor con un nombre y reutilizarlo en toda la hoja de estilos. Si el color principal de tu sitio aparece en veinte sitios distintos y necesitas cambiarlo, con una variable lo cambias en un solo lugar.

A diferencia de las variables de preprocesadores como Sass, las variables CSS son parte del lenguaje nativo y se comportan en tiempo de ejecución: pueden cambiar con media queries, pseudoclases o JavaScript sin recompilar nada.

Definir y usar variables

Los nombres de variables siempre empiezan por dos guiones (--). Se definen como cualquier otra propiedad CSS:

:root {
    --color-principal: #84ba3f;
    --color-texto: #333333;
    --fuente-base: 'Segoe UI', sans-serif;
    --radio-borde: 6px;
    --espaciado: 1rem;
}

Se usan con la función var():

body {
    font-family: var(--fuente-base);
    color: var(--color-texto);
}

.boton {
    background-color: var(--color-principal);
    border-radius: var(--radio-borde);
    padding: var(--espaciado) calc(var(--espaciado) * 2);
}

a:hover {
    color: var(--color-principal);
}

Alcance: globales y locales

:root representa el elemento <html> y es el selector con mayor alcance posible: las variables definidas ahí están disponibles en todo el documento. Por eso es el lugar habitual para las variables globales del sitio.

Pero las variables CSS respetan el alcance del CSS normal: puedes definir o sobreescribir una variable dentro de cualquier selector, y ese valor se aplica solo a ese elemento y sus descendientes:

:root {
    --color-principal: #84ba3f;
}

/* Dentro de .alerta, la variable tiene otro valor */
.alerta {
    --color-principal: #cc3333;
    border: 2px solid var(--color-principal);  /* rojo */
    color: var(--color-principal);              /* rojo */
}

/* Fuera de .alerta, sigue siendo verde */
.boton {
    background: var(--color-principal);  /* verde */
}

Este mecanismo es muy útil para componentes que necesitan variantes de color sin duplicar reglas.

Valores de respaldo

var() acepta un segundo argumento: el valor que se usa si la variable no está definida:

h1 {
    color: var(--color-titulo, var(--color-principal, #333));
}

Los valores de respaldo se pueden anidar: primero intenta --color-titulo, luego --color-principal, y finalmente el literal #333. Útil cuando construyes componentes que otros podrán reutilizar con su propio set de variables.

Variables en calc()

Las variables se integran perfectamente con calc() y las demás funciones de valor:

:root {
    --espaciado: 1rem;
    --columnas: 3;
}

.grid {
    gap: var(--espaciado);
    grid-template-columns: repeat(var(--columnas), 1fr);
}

.elemento {
    padding: var(--espaciado) calc(var(--espaciado) * 1.5);
    margin-bottom: calc(var(--espaciado) / 2);
}

También puedes guardar solo el número en la variable y añadir la unidad al usarla, lo que permite más flexibilidad:

:root {
    --ratio: 1.5;
}

p {
    line-height: var(--ratio);
    margin-bottom: calc(var(--ratio) * 1rem);
}

Temas y modo oscuro

Las variables CSS son la base de cualquier sistema de temas. El patrón habitual es definir las variables semánticamente (por función, no por valor) y cambiar los valores según el contexto:

/* Tema claro (por defecto) */
:root {
    --fondo: #ffffff;
    --texto: #333333;
    --superficie: #f5f5f5;
    --acento: #84ba3f;
}

/* Modo oscuro automático según preferencia del sistema */
@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #1a1a1a;
        --texto: #e8e8e8;
        --superficie: #2a2a2a;
        --acento: #9ed44f;
    }
}

body {
    background-color: var(--fondo);
    color: var(--texto);
}

.tarjeta {
    background-color: var(--superficie);
}

Con este enfoque, el código de los componentes (body, .tarjeta...) no cambia: solo cambian los valores de las variables. Todo el sitio adapta sus colores con unas pocas líneas.

También es posible ofrecer un interruptor manual independiente de la preferencia del sistema. El truco es añadir una clase al elemento <html> desde JavaScript cuando el usuario pulsa el botón, y definir las variables condicionadas a esa clase:

html.tema-oscuro {
    --fondo: #1a1a1a;
    --texto: #e8e8e8;
    --superficie: #2a2a2a;
}
<button id="toggle-tema">Cambiar tema</button>

<script>
document.getElementById('toggle-tema').addEventListener('click', () => {
    document.documentElement.classList.toggle('tema-oscuro');
});
</script>

Al hacer clic, JavaScript añade o quita la clase tema-oscuro del elemento <html>. Cuando la clase está presente, el selector html.tema-oscuro activa las variables del tema oscuro y todos los elementos que las usan cambian de aspecto automáticamente.

Variables y JavaScript

Las variables CSS son accesibles y modificables desde JavaScript, lo que las hace especialmente potentes para interactividad:

<script>
// Leer el valor de una variable
const raiz = document.documentElement;
const color = getComputedStyle(raiz).getPropertyValue('--color-principal');

// Cambiar una variable en tiempo real
raiz.style.setProperty('--color-principal', '#ff6600');

// Aplicar el valor de un slider a una variable
const slider = document.querySelector('#tamano');
slider.addEventListener('input', () => {
    raiz.style.setProperty('--tamano-fuente', slider.value + 'px');
});
</script>

Cambiar una variable desde JavaScript actualiza automáticamente todos los elementos que la usan, sin tocar el DOM uno por uno.

Recapitulación

  • Las variables CSS se definen con --nombre: valor y se usan con var(--nombre).
  • Definidas en :root son globales. Definidas en un selector solo afectan a ese elemento y sus descendientes.
  • var(--nombre, respaldo) usa el segundo argumento si la variable no existe. Los respaldos se pueden anidar.
  • Se integran con calc() y otras funciones de valor para cálculos proporcionales.
  • Son la base de los sistemas de temas: define variables semánticas (--fondo, --texto) y cámbialas en bloque con @media (prefers-color-scheme: dark) o una clase.
  • Son accesibles desde JavaScript: getPropertyValue() para leer, setProperty() para escribir. Cambiar una variable actualiza todos los elementos que la usan.

Tu proyecto

Refactoriza estilos.css para centralizar la paleta de colores en variables. Añade este bloque al principio del archivo, justo después de la regla box-sizing:

:root {
    --color-principal: #1a1a2e;   /* azul muy oscuro — textos y fondo del footer */
    --color-acento: #84ba3f;      /* verde — enlaces activos, detalles */
    --color-fondo: #fafaf8;       /* blanco cálido — fondo general */
    --color-texto: #333;          /* gris oscuro — texto corriente */
    --color-sutil: #888;          /* gris medio — etiquetas, metadatos */

    --fuente-titulos: 'Playfair Display', serif;
    --fuente-texto: 'Inter', sans-serif;

    --radio: 6px;
    --sombra: 0 2px 8px rgba(0, 0, 0, 0.08);
}

Si quieres usar Playfair Display para los títulos, añade ahora también su enlace de Google Fonts en el <head> (junto al de Inter que ya tienes). En la lección de metadatos verás el <head> completo con todas las fuentes ya incluidas.

Ahora reemplaza los valores hardcoded que ya tenías. Por ejemplo:

/* Antes */
body { color: #333; background: #fafaf8; }
a:hover { color: #84ba3f; }

/* Después */
body { color: var(--color-texto); background: var(--color-fondo); }
a:hover { color: var(--color-acento); }

La ventaja: si más adelante decides cambiar el verde de acento por otro color, solo hay que modificar una línea en :root.

En la próxima lección: transiciones y animaciones: cómo dar vida al portfolio con efectos de hover suaves y entradas animadas.

TOP