¿Por qué usarlas?

Nos ayudan con el principio DRY (Don't Repeat Yourself )

Básicamente nos ayudan a evitar que se duplique nuestro código y asignarle un valor más fácil de recordar. Y lo más importante, nos ofrece la posibilidad de cambiar el valor de nuestras propiedades en un único lugar sin tener que modificarlo en cada uno de los archivos donde lo necesitemos. Haciendo nuestro código más mantenible y escalable.

Preprocesadores

Hace más de diez años que los preprocesadores nos ofrecen "variables" en css y es una de las razones por las cuales se popularizaron. Pero no fue hasta 2016 que la mayoría de navegadores soportaron el estándar css.

¿Por qué deberíamos usar custom properties en vez de las variables en preprocesadores?

• Son nativas y no es necesario usar un pre-processor.

• Puedes acceder y manipularlas a través de javascript.

• Son dinámicas, si su valor cambia, el navegador actualiza el valor en tiempo de ejecución.

Cómo usarlas?

Para declarar una custom property, se debe colocar dos guiones en frente del nombre de nuestra custom property (recuerda que distingue mayúsculas y minúsculas).

--white: '#fff'

Podemos usar la función var() para acceder al valor de nuestras custom properties. La función recibe dos argumentos:

• El nombre de la custom property
• (Opcional) Un valor fallback en caso de que la custom property sea inválida.

color: var(--white, #eee)

Podemos definirlas en cualquier lugar, pero usualmente las encontramos en la pseudo clase :root, debido a que representa la raíz del DOM y permite acceder al valor de una manera global.

:root {
  --main-color: #ec130e;
}

button {
  /* Redifinos su valor en este scope */
  --main-color: #000;
  background-color: var(--main-color) /* #000 */
}

Ejemplos de uso

Colores

:root{
  /* Paleta primaria */
  --color-primary: #fdd41c;
  --color-secondary: #222831;
  /* Paleta secundaria */
  --color-info: #0ab9ff;
  --color-danger: #ff5a4f;
  --color-warning: #f1c40f;
  --color-success: #30e892;
}
h1 {
  color: var(--color-primary);
}

Font Size y Font Family

:root{
  --heading-size: 32px;
  --main-font: Helvetica, Arial, sans-serif;
}
h1 {
  font-size: var(--heading-size);
  font-family: var(--main-font);
}

Spacing

:root {
    --space-unit:  1em;
    --space-xs:    calc(0.5 * var(--space-unit));
    --space-sm:    calc(0.75 * var(--space-unit));
    --space-md:    calc(1.25 * var(--space-unit));
    --space-lg:    calc(2 * var(--space-unit));
    --space-xl:    calc(3.25 * var(--space-unit));
}

Dark Mode

:root {
  --body-color: #3e5a47;
  --background-color: #fff6dc;
  --heading-color: #4e534c;
}

/* Redifiniendo las custom properties en dark mode */
@media (prefers-color-scheme: dark) {
  :root  {
    --body-color: #b9f3cc;
    --background-color: #292900;
    --heading-color: #c5eab7;
  }
}