Custom Properties CSS

Tempo de leitura: 4 minutos

Custom Properties CSS: Por anos, variáveis eram um recurso exclusivo de pré-processadores como Sass. Hoje, o CSS nativo possui um sistema de variáveis robusto e dinâmico: as Propriedades Customizadas, frequentemente chamadas de Variáveis CSS.

Elas são uma ferramenta revolucionária que permite aos desenvolvedores definir valores reutilizáveis (cores, tamanhos, fontes) e, o mais importante, usufruir da Cascata e da Herança do CSS para temas e adaptações em tempo real.

Neste artigo, vamos explorar a sintaxe, os benefícios e o superpoder de ser uma variável que interage diretamente com o DOM.

1. Sintaxe e Definição

As Propriedades Customizadas são declaradas usando dois hífens antes do nome (ex: --cor-principal).

A. Definição (Declaração)

Você define o valor da variável dentro de um seletor. O seletor :root é usado para criar variáveis globais disponíveis em todo o documento:

CSS

/* Escopo Global: Disponível para todos os elementos */
:root {
  --cor-primaria: #007bff; /* Cor principal de marca */
  --espacamento-padrao: 1rem; /* Tamanho de espaçamento base */
}

/* Escopo Local: Disponível apenas dentro de elementos com a classe .card */
.card {
  --sombra: 0 4px 6px rgba(0, 0, 0, 0.1); 
}

B. Uso (Aplicação)

Para acessar o valor da variável, você usa a função nativa var():

CSS

body {
  margin: var(--espacamento-padrao);
}

.card {
  box-shadow: var(--sombra);
  background-color: var(--cor-primaria); /* Herda de :root */
}

2. O Superpoder da Cascata e Escopo

Ao contrário das variáveis de pré-processadores (que são compiladas para valores estáticos), as Variáveis CSS são dinâmicas e participam ativamente da Cascata e da Herança:

Escopo: Uma variável definida em um seletor (.card) só está disponível para esse elemento e seus filhos. Se ela for definida em :root, é global.
Herança: O valor de uma variável é herdado pelos elementos filhos, a menos que seja sobrescrito.
Sobrescrita/Tematização: Você pode redefinir o valor da variável em um seletor mais específico ou em um novo contexto, e essa mudança se propaga para todos os seus filhos.

Exemplo: Tematização em Tempo Real

CSS

/* Valores Padrão (Light Mode) */
:root {
  --fundo: white;
  --texto: black;
}

/* Sobrescrita em escopo específico (Dark Mode) */
.tema-escuro {
  --fundo: #222;
  --texto: #f9f9f9;
}

/* Aplicação universal */
body {
  background-color: var(--fundo);
  color: var(--texto);
}
/* Ao adicionar a classe .tema-escuro ao body, todas as regras de fundo e cor se invertem. */

3. Valor de Fallback (Reserva)

Um recurso essencial da função var() é a capacidade de fornecer um valor de fallback (reserva), que será usado caso a variável não esteja definida ou seja inválida no escopo atual.

CSS

/* Se a variável --tamanho-icone não estiver definida, usa 24px como reserva */
.icone {
  width: var(--tamanho-icone, 24px); 
  height: var(--tamanho-icone, 24px);
}

Isso aumenta a resiliência e a previsibilidade do seu CSS.

4. Vantagens Essenciais

Vantagem	Descrição
Integração com JavaScript/DOM	Valores de variáveis podem ser lidos e alterados diretamente via JavaScript (ex: `element.style.setProperty('--cor', 'red')`), permitindo interfaces verdadeiramente dinâmicas sem precisar mudar classes.
Performance	O uso de variáveis geralmente resulta em CSS final menor e mais fácil de ser interpretado pelo navegador em comparação com pré-processadores complexos.
Reutilização e Clareza	Centraliza cores, tamanhos e outras constantes em um único local, tornando o código legível e fácil de manter.
Tematização Simples	O design Dark Mode (tema escuro) torna-se trivial, exigindo apenas a sobrescrita de algumas variáveis.

✅ Conclusão Custom Properties CSS

As Propriedades Customizadas (Variáveis CSS) são um marco na evolução do CSS. Elas trazem o poder da modularidade e da reutilização, antes restrito a pré-processadores, diretamente para o navegador. Ao tirar proveito da Cascata, do Escopo e da função var() com fallback, você pode criar estilos mais organizados, altamente adaptáveis e que interagem de forma nativa com JavaScript, permitindo temas e layouts dinâmicos.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: