Variables y funciones modernas

El problema: repetir una decisión

h1     { color: #2563eb; }
button { background: #2563eb; }
a      { color: #2563eb; }

Ese color no aparece tres veces: aparece una decisión, escrita tres veces. El día que cambie, hay que acordarse de los tres sitios, y del cuarto que se te olvidó.

:root {
    --color-primary: #2563eb;
}

h1     { color: var(--color-primary); }
button { background: var(--color-primary); }
a      { color: var(--color-primary); }

Custom property

Una variable de CSS. Se declara con dos guiones, se lee con var(), y se hereda como cualquier otra propiedad: por eso se declaran en :root, que es el elemento raíz, y así están disponibles en todo el documento.

Que se hereden tiene una consecuencia útil: puedes redefinir una variable dentro de un componente y todo lo que haya debajo usará el valor nuevo, sin tocar nada más.

.card--oferta {
    --color-primary: #c2410c;   /* dentro de esta tarjeta, otro primario */
}

Un sistema pequeño

:root {
    --color-text: #1f2937;
    --color-background: #ffffff;
    --color-primary: #2563eb;

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 3rem;

    --radius: 0.75rem;
}

Fíjate en los nombres. --space-sm dice para qué sirve; --rem16 diría solo cuánto mide. Un buen nombre de variable describe el papel, no el valor, porque el valor puede cambiar y el papel no.

Y var() admite un valor de respaldo, útil cuando la variable puede no estar definida:

padding: var(--space-md, 1.5rem);

Cuatro funciones que quitan media querys

calc()

Opera entre unidades distintas, que es lo que ninguna otra cosa puede hacer:

width: calc(100% - 2rem);

Necesita espacios alrededor del - y del +. Sin ellos no funciona, y es un despiste que cuesta encontrar.

min() y max()

width: min(90%, 70rem);      /* el más pequeño de los dos */
padding: max(1rem, 3vw);     /* el más grande de los dos */

Se leen al revés de lo que parece. min() pone un techo: nunca pasará de 70rem. max() pone un suelo: nunca bajará de 1rem.

clamp()

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
}

mínimo      2rem   · nunca más pequeño
preferido   5vw    · lo que se adapta
máximo      4rem   · nunca más grande

Ese titular crece con la ventana entre dos límites, sin una sola media query. Es la herramienta con la que se resuelve buena parte del responsive antes de llegar a los breakpoints, y volveremos a ella en la semana 4.

Tarea 6 · Elimina los números mágicos

Número mágico

Un valor escrito a pelo en el código sin que nada explique de dónde sale. margin-left: 37px es el ejemplo perfecto: funciona, nadie sabe por qué, y nadie se atreve a tocarlo.

Sobre tu hoja de estilos:

1. Busca los valores que se repiten: colores, espaciados, radios, tamaños.
2. Decide cuáles representan una decisión reutilizable y conviértelos en variables con nombres que digan su papel.
3. Sustituye todas sus apariciones por var().
4. Prueba a cambiar --color-primary por otro color y recarga. Si el sitio entero cambia de color con una sola línea, lo has hecho bien.
5. Añade un clamp() al tamaño de tu h1 y comprueba cómo se comporta al estrechar la ventana.

Ver respuestas

1 · Porque las custom properties se heredan, y :root es el elemento raíz: declarándolas ahí quedan disponibles en todo el documento.

2 · Ocupa el 90 % del espacio, pero sin pasar nunca de 70rem. Pone un techo.

3 · Un mínimo, un valor preferido que se adapta, y un máximo.

---