Variáveis CSS (Custom Properties) para Reutilização

Olá, futuros desenvolvedores web! 👋 Nesta aula prática, vamos mergulhar em uma das ferramentas mais poderosas e subestimadas do CSS: as Variáveis CSS, também conhecidas como Custom Properties. Elas são um divisor de águas para a manutenção, escalabilidade e flexibilidade dos seus projetos. Prepare-se para elevar o nível do seu CSS! 🚀

1. Introdução: O Poder das Variáveis no CSS

Imagine que você está construindo um site e decide que a cor principal da sua marca será um tom específico de azul. Você usa esse azul em botões, links, cabeçalhos, bordas, etc. Agora, e se o cliente decidir mudar essa cor? Você teria que vasculhar cada arquivo CSS, encontrar cada ocorrência daquele azul e alterá-la manualmente. 😫

É aí que as Variáveis CSS entram para salvar o dia! Elas permitem que você defina valores que podem ser reutilizados em todo o seu stylesheet, de forma semelhante às variáveis em linguagens de programação. Isso torna seu código mais:

Reutilizável: Defina uma vez, use em muitos lugares.
Manutenível: Altere um valor em um único lugar e veja a mudança refletida globalmente.
Dinâmico: Podem ser manipuladas via JavaScript, abrindo portas para temas, modos escuros e muito mais!
Legível: Nomes descritivos para cores, tamanhos, etc., facilitam o entendimento do código.

Vamos começar a explorar essa maravilha! ✨

2. Explicação Detalhada com Exemplos

2.1. Sintaxe Básica: Declarando e Usando

A sintaxe para declarar uma variável CSS é bem simples: você prefixa o nome da variável com dois hifens (--). Para usar essa variável, você utiliza a função var() e passa o nome da variável como argumento.

/* Declaração */
--nome-da-minha-variavel: valor;
 
/* Uso */
propriedade: var(--nome-da-minha-variavel);

2.2. Escopo: Global vs. Local

As variáveis CSS seguem a cascata do CSS, o que significa que elas têm escopo.

Escopo Global (:root): Para variáveis que você deseja usar em todo o seu documento, declare-as no seletor :root. Este seletor aponta para o elemento <html> do seu HTML, garantindo que as variáveis estejam disponíveis em todos os lugares.

/* style.css */
:root {
  --cor-primaria: #007bff; /* Azul */
  --fonte-padrao: sans-serif;
  --espacamento-padrao: 1rem;
}
 
body {
  font-family: var(--fonte-padrao);
}
 
h1 {
  color: var(--cor-primaria);
  margin-bottom: var(--espacamento-padrao);
}
 
button {
  background-color: var(--cor-primaria);
  color: white;
  padding: 0.5rem var(--espacamento-padrao);
  border: none;
  border-radius: 5px;
}

Escopo Local: Você também pode declarar variáveis dentro de seletores específicos. Elas estarão disponíveis apenas para esse seletor e seus descendentes. Isso é útil para componentes ou seções específicas.
```
/* style.css */
.card {
  --cor-borda-card: #ccc;
  border: 1px solid var(--cor-borda-card);
  padding: 1rem;
}
 
.card p {
  color: #333;
}
 
.card.destaque {
  --cor-borda-card: #ffc107; /* Amarelo - sobrescreve a variável local */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
```
No exemplo acima, --cor-borda-card só existe dentro de .card e seus filhos. O .card.destaque sobrescreve essa variável apenas para ele mesmo e seus filhos, sem afetar outros .card.

2.3. Valores de Fallback (Reserva)

E se uma variável não for definida? Ou se você quiser um valor padrão caso a variável não exista? A função var() aceita um segundo argumento opcional: um valor de fallback.

/* style.css */
:root {
  --cor-texto: #333;
  /* --cor-destaque não está definida aqui */
}
 
p {
  color: var(--cor-texto); /* Usa #333 */
}
 
a {
  color: var(--cor-destaque, purple); /* Se --cor-destaque não existir, usa 'purple' */
  text-decoration: none;
}
 
button {
  background-color: var(--cor-botao, #007bff); /* Se --cor-botao não existir, usa '#007bff' */
  color: white;
  padding: 0.5rem 1rem;
}

Isso é ótimo para garantir que seu design não quebre caso uma variável esteja faltando ou para fornecer padrões que podem ser sobrescritos.

2.4. Herança e Cascata

Variáveis CSS são propriedades herdadas. Se você define uma variável em um elemento pai, ela estará disponível para todos os seus filhos, a menos que seja sobrescrita por um filho.

<!-- index.html -->
<div class="container">
  <p>Este é um parágrafo no container.</p>
  <div class="sub-container">
    <p>Este é um parágrafo no sub-container.</p>
    <span>Um span.</span>
  </div>
</div>

/* style.css */
.container {
  --cor-fundo-container: lightblue;
  background-color: var(--cor-fundo-container);
  padding: 20px;
}
 
.sub-container {
  /* --cor-fundo-container é herdada de .container */
  background-color: var(--cor-fundo-container); /* Será lightblue */
  margin-top: 10px;
  padding: 15px;
  border: 1px solid blue;
}
 
.sub-container span {
  /* Também herda --cor-fundo-container, mas não a usa diretamente aqui */
  color: darkblue;
}
 
/* Sobrescrevendo a variável localmente */
.sub-container.dark {
  --cor-fundo-container: darkslategray; /* Apenas para este elemento e seus filhos */
  color: white;
}

2.5. Interação com JavaScript (Breve Menção)

Uma das características mais poderosas das Variáveis CSS é que elas podem ser lidas e modificadas com JavaScript! Isso abre um mundo de possibilidades para temas dinâmicos, customização de usuário, e muito mais.

// Obtendo o valor de uma variável CSS
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--cor-primaria');
console.log(primaryColor); // Ex: "#007bff"
 
// Definindo o valor de uma variável CSS
document.documentElement.style.setProperty('--cor-primaria', '#ff0000'); // Muda a cor primária para vermelho!

Não vamos focar no JavaScript nesta aula, mas é importante saber que essa capacidade existe.

3. Código de Exemplo Oficial (MDN Web Docs Adaptado)

Vamos consolidar o que aprendemos com um exemplo mais completo, adaptado da documentação oficial do MDN, que mostra diferentes usos das variáveis.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Variáveis CSS</title>
    <style>
        /* 🎨 Declaração Global de Variáveis (no :root) */
        :root {
            --cor-principal: #3498db; /* Azul vibrante */
            --cor-secundaria: #2ecc71; /* Verde esmeralda */
            --cor-texto-claro: #ecf0f1; /* Cinza claro */
            --cor-texto-escuro: #2c3e50; /* Azul escuro */
            --espacamento-padrao: 1.5rem;
            --tamanho-fonte-titulo: 2.5rem;
            --borda-arredondada: 8px;
        }
 
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: var(--espacamento-padrao);
            background-color: var(--cor-texto-claro);
            color: var(--cor-texto-escuro);
            line-height: 1.6;
        }
 
        header {
            background-color: var(--cor-principal);
            color: var(--cor-texto-claro);
            padding: var(--espacamento-padrao);
            text-align: center;
            border-radius: var(--borda-arredondada);
            margin-bottom: var(--espacamento-padrao);
        }
 
        h1 {
            font-size: var(--tamanho-fonte-titulo);
            margin-bottom: 0;
        }
 
        .card {
            background-color: white;
            padding: var(--espacamento-padrao);
            margin-bottom: var(--espacamento-padrao);
            border-radius: var(--borda-arredondada);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            /* 🖌️ Variável local para este componente */
            --cor-borda-card: #bdc3c7; /* Cinza claro */
            border: 1px solid var(--cor-borda-card);
        }
 
        .card-header {
            color: var(--cor-principal);
            font-size: 1.8rem;
            margin-bottom: 1rem;
        }
 
        .card.destaque {
            /* 🌟 Sobrescrevendo a variável local para este tipo de card */
            --cor-borda-card: var(--cor-secundaria); /* Usa a cor secundária global */
            border: 2px solid var(--cor-borda-card);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }
 
        button {
            background-color: var(--cor-principal);
            color: var(--cor-texto-claro);
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.3s ease;
        }
 
        button:hover {
            background-color: var(--cor-secundaria); /* Usa outra variável global no hover */
        }
 
        .link-personalizado {
            /* 🔙 Exemplo de fallback: se --cor-link não existir, usa 'red' */
            color: var(--cor-link, red);
            text-decoration: none;
            font-weight: bold;
        }
 
        .link-personalizado:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <header>
        <h1>Minha Página com Variáveis CSS</h1>
        <p>Um exemplo prático de Custom Properties.</p>
    </header>
 
    <main>
        <div class="card">
            <h2 class="card-header">Sobre as Variáveis</h2>
            <p>Elas tornam o CSS mais flexível e fácil de manter. Podemos definir cores, tamanhos, espaçamentos e muito mais em um único lugar.</p>
            <button>Saiba Mais</button>
        </div>
 
        <div class="card destaque">
            <h2 class="card-header">Card em Destaque</h2>
            <p>Este card tem uma borda diferente porque sua variável local <code>--cor-borda-card</code> foi sobrescrita.</p>
            <button>Ver Detalhes</button>
        </div>
 
        <p>Visite nossa <a href="#" class="link-personalizado">seção de tutoriais</a> para mais informações.</p>
    </main>
</body>
</html>

Abra este código em seu navegador e experimente alterar os valores das variáveis no bloco :root do CSS. Veja como as mudanças se propagam instantaneamente por todo o documento! 🤯

4. Exercícios/Desafios Práticos

Agora é a sua vez de colocar a mão na massa! 🛠️

Objetivo: Você irá construir uma pequena interface de "dashboard" ou "painel de controle" usando Variáveis CSS para gerenciar cores, fontes e espaçamentos.

Crie um arquivo index.html e um style.css.

Tarefas:

1. Estrutura HTML Básica:
- Crie um index.html com a estrutura básica (doctype, html, head, body).
- Linke seu arquivo style.css.
- Dentro do <body>, crie:
  - Um <header> com um título <h1> e um parágrafo.
  - Uma <main> que contenha:
    - Duas seções (<section>), cada uma com um título <h2> e alguns parágrafos de texto.
    - Um <footer> com um parágrafo de copyright.
2. Definição de Variáveis Globais (:root):
- No seu style.css, dentro do seletor :root, defina as seguintes variáveis:
  - --cor-fundo-principal: Uma cor clara de sua escolha (ex: #f0f2f5).
  - --cor-texto-padrao: Uma cor escura para o texto (ex: #333).
  - --cor-destaque: Uma cor vibrante para elementos importantes (ex: #007bff).
  - --cor-secundaria: Uma cor complementar à destaque (ex: #28a745).
  - --fonte-primaria: Uma família de fontes (ex: 'Arial', sans-serif).
  - --tamanho-titulo-grande: Um tamanho de fonte para h1 (ex: 3rem).
  - --tamanho-titulo-medio: Um tamanho de fonte para h2 (ex: 2rem).
  - --espacamento-interno: Um valor para padding (ex: 1.5rem).
  - --sombra-caixa: Uma sombra sutil para elementos (ex: 0 4px 8px rgba(0, 0, 0, 0.1)).
  - --borda-arredondada: Um valor para border-radius (ex: 8px).
3. Aplicação de Variáveis Globais:
- Aplique --cor-fundo-principal e --cor-texto-padrao ao body.
- Use --fonte-primaria para o body.
- Aplique --tamanho-titulo-grande ao h1 dentro do header.
- Aplique --cor-destaque para a cor do h1.
- Use --tamanho-titulo-medio para os h2 das seções.
- Aplique --espacamento-interno como padding para o header e as <section>s.
- Dê um background-color ao header usando --cor-destaque e a cor do texto do header como --cor-texto-claro (defina essa variável no :root também).
- Adicione --borda-arredondada ao header.
4. Criando um Componente de Card com Variáveis Locais:
- Dentro de cada <section>, crie um div com a classe card.
- Dê a cada card um background-color: white; e aplique --sombra-caixa.
- Dentro da classe .card, declare uma variável local: --cor-borda-card: #ddd;.
- Use --cor-borda-card para definir a border de cada card (ex: 1px solid var(--cor-borda-card)).
- Aplique --borda-arredondada para o border-radius dos cards.
5. Sobrescrevendo Variáveis Locais para Variações:
- Adicione uma classe card-alerta a um dos seus cards (ex: <div class="card card-alerta">).
- No seu CSS, para a classe .card-alerta, sobrescreva a variável --cor-borda-card para usar --cor-secundaria ou outra cor de sua escolha. Veja como apenas esse card é afetado!
6. Adicionando Botões com Variáveis e Fallback:
- Em cada card, adicione um <button>.
- Estilize os botões usando --cor-destaque para background-color e --cor-texto-claro (defina essa variável no :root se ainda não o fez) para a color.
- Adicione um padding e border-radius aos botões.
- No hover do botão, mude o background-color para var(--cor-hover-botao, var(--cor-secundaria)). Isso demonstra um fallback para outra variável.
7. Footer com Variáveis:
- Estilize o footer usando --cor-texto-escuro para o background-color e --cor-texto-claro para a color.
- Centralize o texto e use --espacamento-interno para o padding.

Dica de Ouro:

Depois de completar os exercícios, experimente mudar os valores das variáveis no :root no seu style.css. Veja como todo o seu layout se adapta instantaneamente! Isso é o poder das Variáveis CSS. 💪

5. Resumo e Próximos Passos

Parabéns! 🎉 Você deu um grande passo para escrever CSS mais eficiente e poderoso. Nesta aula, você aprendeu que:

Variáveis CSS (Custom Properties) são como variáveis em linguagens de programação, permitindo reutilização de valores.
Elas são declaradas com -- e usadas com var().
Podem ter escopo global (:root) ou local, seguindo a cascata do CSS.
A função var() aceita um valor de fallback para robustez.
São herdadas e podem ser sobrescritas em elementos descendentes.
Podem ser manipuladas via JavaScript para criar interfaces dinâmicas.

Dominar as Variáveis CSS é crucial para a construção de sistemas de design, temas e para manter grandes bases de código CSS organizadas e fáceis de manter.

Próximos Passos:

Experimente mais: Tente criar mais variáveis para line-height, box-shadow ou transições.
Sistemas de Design: Pesquise como grandes empresas usam variáveis CSS em seus sistemas de design (ex: Material Design, Bootstrap).
Temas Dinâmicos: Se tiver curiosidade, explore como usar JavaScript para alternar entre temas escuros e claros modificando variáveis CSS.
Projeto Final: Pense em como você pode aplicar Variáveis CSS no seu projeto final para torná-lo mais robusto e fácil de customizar.

Continue praticando e explorando! O mundo do CSS está cheio de ferramentas incríveis. 🚀

Fundamentos da Web com HTML e CSS

Variáveis CSS (Custom Properties) para Reutilização

Variáveis CSS (Custom Properties) para Reutilização

1. Introdução: O Poder das Variáveis no CSS

2. Explicação Detalhada com Exemplos

2.1. Sintaxe Básica: Declarando e Usando

2.2. Escopo: Global vs. Local

2.3. Valores de Fallback (Reserva)

2.4. Herança e Cascata

2.5. Interação com JavaScript (Breve Menção)

3. Código de Exemplo Oficial (MDN Web Docs Adaptado)

4. Exercícios/Desafios Práticos

Tarefas:

Dica de Ouro:

5. Resumo e Próximos Passos