O que são Variáveis CSS (Custom Properties) e por que usá-las?

Entenda como as variáveis funcionam e como elas podem otimizar seu CSS.

Imagine que você está pintando uma casa. Você escolhe uma cor específica para as paredes da sala, do quarto e do corredor. Se, de repente, você decide que essa cor não é a ideal e quer trocá-la, o que você faria? Teria que ir em cada cômodo e repintar tudo, certo? Que trabalhão!

No mundo do CSS, antes das variáveis, era um pouco parecido. Se você definisse uma cor (#FF0000 - vermelho, por exemplo) para o título do seu site, para os botões e para os links, e depois decidisse que queria um tom de vermelho diferente, teria que ir em cada lugar onde usou #FF0000 e mudar manualmente. Isso é demorado, propenso a erros e nada prático, especialmente em projetos grandes.

É aí que entram as Variáveis CSS, também conhecidas como Custom Properties (Propriedades Personalizadas).

O que são Variáveis CSS?

Variáveis CSS são, como o nome sugere, "caixinhas" onde você pode guardar um valor (como uma cor, um tamanho de fonte, um espaçamento, etc.) e dar um nome para essa caixinha. Depois, em vez de usar o valor diretamente em vários lugares do seu CSS, você usa o nome da caixinha.

Voltando à analogia da casa: as variáveis CSS são como se você dissesse: "A cor principal da casa será 'Cor da Parede'. E 'Cor da Parede' é o tom de vermelho X." Se você quiser mudar, basta mudar a definição de "Cor da Parede" em um único lugar, e todos os cômodos que usam "Cor da Parede" serão atualizados automaticamente!

[[google images: CSS variables analogy]]

Por que usar Variáveis CSS?

As vantagens de usar variáveis CSS são enormes e transformam a forma como escrevemos e mantemos nosso código:

  1. Reutilização de Código (DRY - Don't Repeat Yourself):

    • Em vez de repetir o mesmo valor (ex: #3498db para um azul) em dezenas de lugares, você o define uma vez em uma variável (ex: --cor-primaria: #3498db;).
    • Isso significa menos código repetido, o que é sempre bom!

  2. Manutenção Simplificada:

    • Se você precisar mudar um valor global (como a cor principal do seu site), basta alterar a variável em um único lugar. Todas as instâncias que usam essa variável serão atualizadas automaticamente.
    • Isso economiza um tempo precioso e reduz drasticamente a chance de esquecer de atualizar um valor em algum canto do seu site.

  3. Consistência Visual:

    • Ao usar variáveis para cores, fontes e espaçamentos, você garante que seu design seja consistente em todo o site. Não haverá "tons de azul" ligeiramente diferentes porque você digitou um código hexadecimal errado em algum lugar.

  4. Temas e Modos (Dark Mode):

    • Variáveis são a base para criar temas dinâmicos. Você pode definir um conjunto de variáveis para o "modo claro" e outro para o "modo escuro". Ao alternar o tema, basta mudar os valores dessas variáveis, e todo o site se adapta instantaneamente.

  5. Legibilidade do Código:

    • É muito mais fácil entender o que --cor-principal ou --espacamento-grande significa do que tentar decifrar #3498db ou 32px em cada linha de CSS. Nomes descritivos tornam seu código mais compreensível para você e para outros desenvolvedores.

  6. Escopo:

    • Variáveis CSS respeitam o escopo, assim como no JavaScript. Você pode definir variáveis globais (disponíveis em todo o documento) ou locais (disponíveis apenas dentro de um elemento específico e seus filhos). Isso oferece flexibilidade e evita conflitos.

Um Olhar Rápido (Veremos em detalhes na próxima lição):

/* Definindo uma variável global */
:root {
  --cor-principal: #3498db; /* Um tom de azul */
  --tamanho-fonte-titulo: 2em;
}

/* Usando as variáveis */
h1 {
  color: var(--cor-principal); /* O título será azul */
  font-size: var(--tamanho-fonte-titulo);
}

button {
  background-color: var(--cor-principal); /* O botão também será azul */
  color: white;
  padding: 10px 20px;
}

Nesta lição, você entendeu o conceito e a importância das variáveis CSS. Na próxima, vamos mergulhar na prática de como declará-las e usá-las!