Custom properties: variáveis de verdade
Trocar a cor de marca de um projeto grande, editando o mesmo hexadecimal repetido em quarenta regras diferentes, é o tipo de tarefa braçal e arriscada que uma variável de CSS elimina de vez.
Estudar esta lição interativa →Imagine um projeto real com uma cor de marca usada em quarenta lugares diferentes: botões, links, bordas, ícones. Se essa cor muda (um reposicionamento de marca, um teste A/B), alguém precisa caçar e trocar o mesmo hexadecimal em quarenta regras, torcendo para não esquecer nenhuma. É exatamente esse problema que as custom properties (as "variáveis" do CSS) resolvem: declarar o valor uma vez, e referenciá-lo em qualquer lugar com var().
Pense na agenda de contatos do seu celular: você salva um número com o apelido "Pizzaria", e sempre que quiser ligar, toca em "Pizzaria", não decora o número. Se a pizzaria trocar de telefone, você atualiza o contato uma vez, e todo lugar que usa aquele apelido (seu histórico, seus favoritos) já liga certo automaticamente. Uma variável CSS funciona do mesmo jeito: --cor-marca é o apelido, var(--cor-marca) é "discar esse apelido".
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. --cor-marca é declarada uma vez em :root e usada em três lugares diferentes; dentro de .destaque, a mesma variável é sobrescrita com outro valor, e só aquele trecho muda.
Repare que uma custom property pode ser sobrescrita num contexto mais específico, do mesmo jeito que qualquer outra propriedade herdada (Módulo 4): declarar --cor-marca de novo dentro de .destaque não muda o valor global em :root, só afeta aquele trecho e seus descendentes. É assim, por exemplo, que o próprio programandoai pinta cada módulo do curso com uma cor diferente: existe uma única variável chamada --m, e cada seção da página sobrescreve o valor dela para a cor daquele módulo específico (inclusive trocando de valor inteiro ao alternar entre tema claro e escuro), enquanto o CSS de botões, ícones e títulos usa var(--m) sem precisar saber qual módulo é qual.
Esquecer os dois hifens no início do nome (escrever var(cor-marca) em vez de var(--cor-marca)) torna a declaração inválida já na leitura do CSS, e o navegador a descarta sem nenhum aviso: vale a regra anterior, se houver, o mesmo tipo de falha silenciosa da unidade esquecida do Módulo 1.
Referenciar uma variável que não existe (nome escrito certo, mas nunca declarado) é diferente, e mais traiçoeiro: a declaração é aceita, mas na hora de calcular o valor ela vira unset. Em propriedades que herdam, como color, o elemento passa a herdar do pai e ignora até uma regra anterior que você escreveu para ele; nas que não herdam, como background-color, volta ao valor inicial. Exemplo: com body{color:blue} p{color:red} p{color:var(--nao-existe)} o parágrafo fica azul, e não vermelho. A saída é o segundo argumento, o fallback: var(--cor-marca, #0ea5e9) usa o azul caso a variável não esteja definida em lugar nenhum.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Declare a variável, use var() e sobrescreva num contexto mais específico.