Custom properties: as variáveis do CSS — CSS moderno, acessibilidade e arquitetura

Variáveis nativas no CSS

Você chegou ao último módulo de Web, e a gente abre com uma daquelas funções que dão gosto: enfim o CSS tem variáveis de verdade.

As custom properties (ou variáveis CSS) são valores reutilizáveis que você declara com um nome que começa por dois traços -- e lê com a função var(). Ao contrário das variáveis de um pré-processador como Sass, são dinâmicas: vivem no DOM, cascateiam e são herdadas. Essa diferença muda tudo, você já vai ver.

Declarar em :root

O lugar habitual para definir variáveis globais é o pseudo-seletor :root, que representa o documento (equivale a <html> mas com maior especificidade). Assim ficam disponíveis em toda a página.

:root {
  --cor-primaria: #2563eb;
  --cor-texto: #1f2937;
  --espaco: 16px;
  --raio: 8px;
}

Usar com var()

.botao {
  background: var(--cor-primaria);
  color: white;
  padding: var(--espaco);
  border-radius: var(--raio);
}

var() aceita um valor de reserva caso a variável não esteja definida:

.aviso {
  color: var(--cor-aviso, #b91c1c); /* usa #b91c1c se --cor-aviso não existir */
}

Por que importam: temas e manutenção

Aqui está o ouro. Sem variáveis, mudar o azul da sua marca era buscar e substituir trinta vezes rezando para não esquecer nenhuma. Com variáveis:

Um único ponto de mudança. Se a sua marca passa de azul para verde, você edita --cor-primaria uma vez em :root e toda a interface é atualizada. Uma linha.
Temas dinâmicos. Como as variáveis cascateiam, você pode redefini-las em um contexto específico (uma classe, um atributo, uma media query) e tudo o que depende dali muda de aparência sem tocar em cada regra.

:root { --fundo: white; --texto: #111; }

[data-tema="escuro"] {
  --fundo: #0f172a;
  --texto: #e2e8f0;
}

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

Mudar data-tema em <html> reescreve as variáveis e, com elas, toda a aparência. Essa é a base de um modo escuro sustentável: um atributo, mil estilos mudando de uma vez. Mágica da boa.