Escopo das Variáveis CSS: Global e Local

Na lição anterior, você aprendeu a declarar e usar variáveis CSS. Agora, vamos aprofundar um conceito muito importante: o escopo das variáveis.

Pense no escopo como o "alcance" ou a "visibilidade" de uma variável. Assim como em outras linguagens de programação, no CSS, uma variável pode ser acessível em todo o seu documento (escopo global) ou apenas em partes específicas dele (escopo local). Entender isso é fundamental para organizar seu código e evitar surpresas.

Escopo Global: Variáveis para o Documento Inteiro

Uma variável com escopo global é aquela que pode ser acessada e utilizada por qualquer elemento em sua página HTML. É como uma regra que vale para todos na casa.

Como declarar variáveis globais?

A maneira mais comum e recomendada de declarar variáveis globais é dentro do seletor :root.

• O seletor :root representa o elemento raiz do documento HTML (o elemento <html>).
• Qualquer variável definida dentro de :root será herdada por todos os outros elementos da página.

Exemplo:

/* Variáveis globais declaradas em :root */
:root {
  --cor-primaria: #007bff; /* Azul principal */
  --tamanho-fonte-base: 16px;
  --espacamento-padrao: 1em;
}

body {
  font-size: var(--tamanho-fonte-base);
  margin: 0;
  padding: var(--espacamento-padrao);
}

h1 {
  color: var(--cor-primaria); /* Usa a cor primária global */
}

button {
  background-color: var(--cor-primaria); /* Usa a cor primária global */
  padding: var(--espacamento-padrao);
}

Neste exemplo, --cor-primaria, --tamanho-fonte-base e --espacamento-padrao podem ser usadas em qualquer lugar do CSS, pois foram definidas no escopo mais alto.

Escopo Local: Variáveis para Elementos Específicos

Uma variável com escopo local é aquela que só pode ser acessada e utilizada dentro do elemento onde foi declarada e em seus elementos filhos. É como uma regra que vale apenas para um cômodo específico da casa e para os objetos que estão dentro dele.

Como declarar variáveis locais?

Você declara variáveis locais dentro de qualquer seletor CSS que não seja :root.

Exemplo:

:root {
  --cor-primaria: #007bff; /* Variável global */
}

.card {
  --cor-fundo-card: #f8f9fa; /* Variável local para .card */
  --borda-card: 1px solid var(--cor-primaria); /* Usa variável global */
  background-color: var(--cor-fundo-card);
  border: var(--borda-card);
  padding: 20px;
  margin: 10px;
}

.card-header {
  --cor-texto-header: #343a40; /* Variável local para .card-header */
  color: var(--cor-texto-header); /* Usa a variável local */
  font-size: 1.5em;
}

.card-body {
  color: var(--cor-texto-header); /* ERRO! --cor-texto-header NÃO está acessível aqui */
  /* Correto seria: color: #343a40; ou definir --cor-texto-header em .card */
}

.card-footer {
  background-color: var(--cor-fundo-card); /* OK! --cor-fundo-card é acessível aqui (filho de .card) */
  border-top: var(--borda-card); /* OK! --borda-card é acessível aqui (filho de .card) */
  padding-top: 10px;
}

Observações Importantes sobre Escopo:

• Herança: Variáveis CSS são herdadas. Se você define --cor-texto em um elemento pai, todos os seus filhos podem usar var(--cor-texto).
• Sobrescrita: Você pode sobrescrever uma variável global em um escopo local. Se você definir --cor-primaria: red; dentro de .minha-secao, todos os elementos dentro de .minha-secao usarão o vermelho para --cor-primaria, enquanto o resto do site continuará usando o valor global (azul, no nosso exemplo).
• Cascata: A cascata do CSS ainda se aplica. A regra mais específica ou a última declarada (se tiver a mesma especificidade) prevalecerá. Isso é crucial para entender como as variáveis são resolvidas.

Por que o Escopo é Importante?

1. Organização: Ajuda a manter seu CSS mais organizado, definindo variáveis onde elas realmente fazem sentido.
2. Modularidade: Permite criar componentes independentes com suas próprias variáveis, facilitando a reutilização.
3. Evitar Conflitos: Reduz a chance de uma variável global afetar acidentalmente um componente que deveria ter um estilo específico.
4. Temas e Variações: Facilita a criação de variações de componentes ou temas específicos para seções da página, sobrescrevendo variáveis globais localmente.

Entender o escopo é um passo fundamental para dominar as Variáveis CSS e escrever um código mais robusto e flexível. Na próxima lição, veremos como a cascata e a herança interagem com as variáveis.