Custom properties

Variáveis CSS (custom properties) guardam tokens do Belavista: vermelho da marca, espaçamento base, raio do chip. Mudou o token no :root, o site inteiro acompanha.

O exemplo deste capítulo é 33-custom-properties, no pacote que acompanha o volume. Altere --cor-marca, preveja títulos e botões, recarregue e confira.

O que você vai aprender

• Declarar propriedades com --nome.
• Ler com var(--nome) e fallback.
• Entender herança e sobrescrita por contexto.
• Evitar valor inválido que quebra a propriedade.
• Conhecer @property e atualização via script (visão).

Criar e usar

:root {
  --cor-marca: #8b1e1e;
  --cor-tinta: #1a1a1a;
  --cor-papel: #f7f4ef;
  --espaco: 1rem;
  --raio: 0.25rem;
}

body {
  color: var(--cor-tinta);
  background: var(--cor-papel);
}

.botao {
  background: var(--cor-marca, #800000);
  color: #fff;
  padding: var(--espaco) calc(var(--espaco) * 1.5);
  border-radius: var(--raio);
}

O segundo argumento de var() é o fallback se a variável não existir.

Escopo e herança

Custom properties herdam. Um .tema-escuro no main pode redefinir --cor-papel só naquele ramo.

.tema-escuro {
  --cor-papel: #1a1a1a;
  --cor-tinta: #f7f4ef;
  --cor-marca: #e07070;
}

Valor inválido

Se --espaco: vermelho e você usa em padding, a declaração fica inválida no uso. Defina tipos coerentes. @property (suporte moderno) documenta sintaxe e valor inicial.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tokens — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main>
      <h1 style="color: var(--cor-marca)">Tokens da casa</h1>
      <button type="button" class="botao">Inscrever oficina</button>
    </main>
  </body>
</html>

Erro comum: esquecer o -- ou chamar var(cor-marca) sem traços. A variável não resolve e o fallback (se houver) entra — ou a propriedade some.

Critério para avançar

Você avança se: centraliza a paleta no :root; sobrescreve um token num tema local; usa fallback em var().

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Onde costuma declarar tokens globais?
2. O que acontece se --cor-marca não existir e não houver fallback?
3. Custom property herda?

Respostas comentadas

1. Em :root (ou html), para o documento inteiro herdar.
2. A propriedade que usa var(--cor-marca) torna-se inválida naquele uso (como se não fosse declarada).
3. Sim. Filhos veem o valor computado do ancestral, salvo redefinição local.