VARIÁVEIS NO CSS: O QUE SÃO, COMO FUNCIONAM E PORQUE UTILIZAR?
Se você já desenvolveu páginas com HTML e CSS, provavelmente está acostumado a definir cores, fontes, margens e outros detalhes visuais diretamente nas regras de estilo. Mas imagine precisar alterar a cor principal de um site que possui dezenas de páginas e centenas de elementos. Você teria que procurar cada ocorrência daquela cor e modificá-la manualmente?
É justamente para facilitar esse tipo de tarefa que existem as variáveis CSS.
Neste artigo, vamos entender como elas funcionam, como utilizá-las e qual é o papel do :root nesse processo, mesmo que você nunca tenha trabalhado com esse recurso antes.
.
1. O que são variáveis CSS?
Uma variável permite armazenar um valor para reutilizá-lo em diferentes partes de uma folha de estilos.
Por exemplo, imagine que você esteja desenvolvendo um site e queira utilizar a cor roxa em vários títulos, botões e elementos de destaque.
Sem variáveis, seu CSS poderia ficar assim:
h1 {
color: #7A40DD;
}
button {
background-color: #7A40DD;
}
a {
color: #7A40DD;
}Code language: CSS (css)Funciona perfeitamente. Entretanto, se você decidir trocar o roxo por azul, precisará alterar o valor em cada regra que utiliza essa cor.
Com variáveis CSS, podemos simplificar:
:root {
--cor-principal: #7A40DD;
}
h1 {
color: var(--cor-principal);
}
button {
background-color: var(--cor-principal);
}
a {
color: var(--cor-principal);
}Code language: CSS (css)Agora, para mudar a cor principal do site, basta modificar o valor de --cor-principal em um único lugar.
As variáveis CSS ajudam a manter o código organizado, facilitam a manutenção e reduzem a repetição de valores.
.
2. O que significa :root?
O :root é um seletor CSS que representa o elemento raiz do documento HTML. Em uma página HTML convencional, esse elemento é a própria tag <html>.
Veja um exemplo de estrutura HTML:
<!DOCTYPE html>
<html>
<head>
<title>Meu site</title>
</head>
<body>
<h1>Olá, mundo!</h1>
</body>
</html>
Code language: HTML, XML (xml)Quando escrevemos :root no CSS, selecionamos esse elemento e podemos declarar variáveis que serão herdadas pelos elementos descendentes da página.
Nesse documento, o elemento <html> é a raiz da estrutura.
:root {
--cor-principal: purple;
--cor-secundaria: orange;
--tamanho-fonte: 18px;
}Code language: CSS (css)Nesse exemplo, criamos três variáveis: uma para a cor principal, outra para a cor secundária e uma terceira para o tamanho da fonte.
Por que utilizar o :root?
Porque ele é uma maneira prática de centralizar configurações que serão utilizadas em diferentes partes do site. Por isso, é muito comum encontrar variáveis de cores, fontes, espaçamentos e outros padrões visuais declaradas nesse seletor.
.
3. Por que os nomes das variáveis começam com dois traços?
Observe esta declaração:
--cor-principal: purple;Os dois traços (--) fazem parte da sintaxe utilizada para declarar uma propriedade personalizada do CSS, frequentemente chamada de variável CSS.
O nome pode ser escolhido pelo desenvolvedor, desde que respeite as regras de nomenclatura.
Veja alguns exemplos:
--cor-fundo: #f5f5f5;
--cor-texto: #222222;
--espacamento: 20px;
--fonte-titulo: Arial, sans-serif;Code language: CSS (css)Dar nomes descritivos às variáveis facilita a leitura do código. Afinal, é muito mais fácil entender o que significa --cor-fundo do que tentar descobrir a finalidade de uma variável chamada --x.
.
4. Como utilizar uma variável CSS?
Para recuperar o valor armazenado em uma variável, utilizamos a função var().
Observe o exemplo completo:
:root {
--cor-principal: #7A40DD;
--cor-texto: #333333;
}
body {
color: var(--cor-texto);
}
h1 {
color: var(--cor-principal);
}
button {
background-color: var(--cor-principal);
color: white;
}Code language: CSS (css)Nesse caso, o texto geral da página utiliza cinza-escuro, enquanto os títulos e o fundo dos botões utilizam a cor principal.
Se quisermos trocar o roxo por verde, basta alterar a declaração:
:root {
--cor-principal: green;
}Code language: CSS (css)Todos os elementos que utilizam var(--cor-principal) e não sobrescrevem esse valor passarão a utilizar verde.
É importante lembrar que o CSS não exige o uso de variáveis. Elas são um recurso que podemos utilizar para tornar o código mais organizado e fácil de manter.
.
5. As variáveis precisam ficar sempre no :root?
Nãooo!!! Embora essa seja uma das práticas mais comuns, as variáveis CSS também podem ser declaradas em classes, IDs e outros seletores.
Imagine que você esteja desenvolvendo cartões de conteúdo em um site e queira definir uma cor de fundo específica para eles.
.card {
--cor-fundo: #eeeeee;
background-color: var(--cor-fundo);
}Code language: CSS (css)Nesse exemplo, a variável --cor-fundo foi declarada na classe .card, e não no :root.
Isso significa que seu valor estará disponível dentro desse elemento e poderá ser utilizado por seus descendentes.
Também podemos criar comportamentos diferentes para componentes distintos:
.botao {
--cor-botao: green;
background-color: var(--cor-botao);
}
.botao-perigo {
--cor-botao: red;
background-color: var(--cor-botao);
}Code language: CSS (css)Um botão pode ser verde, enquanto outro pode ser vermelho, mesmo que ambos utilizem a mesma variável.
Essa possibilidade é útil quando queremos criar componentes reutilizáveis com aparências diferentes.
.
6. O que acontece quando uma variável não está definida?
Podemos utilizar a função var() com um valor alternativo.
h1 {
color: var(--cor-titulo, black);
}Code language: CSS (css)Nesse exemplo, o CSS tentará utilizar o valor de --cor-titulo. Caso a variável não esteja definida ou não tenha um valor válido para aquela propriedade, o navegador poderá utilizar black como alternativa.
Esse recurso é interessante para evitar que a ausência de uma variável comprometa o resultado visual esperado.
.
7. Existe outro recurso chamado @property?
Sim. Além das variáveis CSS convencionais, existe o recurso @property, que permite registrar propriedades personalizadas com regras específicas.
Veja um exemplo:
@property --minha-cor {
syntax: "<color>";
inherits: false;
initial-value: blue;
}
.caixa {
background-color: var(--minha-cor);
}Code language: CSS (css)Nesse caso, estamos informando ao navegador que a propriedade --minha-cor deve receber um valor do tipo cor, que não deve ser herdado automaticamente e que possui azul como valor inicial.
O @property é um recurso mais avançado, útil em situações como animações e controle dos tipos de valores aceitos.
Para quem está começando, não é necessário dominar esse recurso imediatamente. Entender o uso de :root, a declaração de variáveis e a função var() já é um excelente começo.
.
8. Quais são as vantagens de utilizar variáveis CSS?
Entre os principais benefícios, podemos destacar:
- Manutenção facilitada: uma alteração pode atualizar diversos elementos de uma página.
- Organização: cores, fontes e espaçamentos ficam centralizados em um único lugar.
- Consistência visual: elementos diferentes podem compartilhar os mesmos padrões de estilo.
- Reutilização: componentes podem utilizar valores definidos previamente.
- Flexibilidade: podemos redefinir variáveis em áreas específicas do site para produzir diferentes aparências.
Essas vantagens são especialmente importantes em projetos maiores, nos quais a quantidade de regras CSS pode crescer significativamente.
.
Conclusão
As variáveis CSS são um recurso que facilita a criação e a manutenção de páginas web. Com elas, podemos armazenar valores, reutilizá-los e alterar a aparência de vários elementos sem precisar modificar cada regra individualmente.
O :root é uma forma bastante utilizada de declarar variáveis globais, mas não é o único lugar onde elas podem ser definidas. Também podemos declará-las em classes, IDs e outros seletores, respeitando as regras de cascata e herança do CSS.
Se você está começando a aprender esse recurso, experimente criar variáveis para as cores principais de um site e utilizá-las em títulos, botões e fundos. É uma maneira simples de perceber como pequenas mudanças na organização do código podem tornar o desenvolvimento web mais eficiente.
.
Até a próxima!