CSS custom properties: o que são e como usá-las

Você já se deparou com um projeto de design em que precisou fazer diversas alterações no código CSS, mas acabou se perdendo em meio a tantas linhas de código repetidas? Isso é mais comum do que se imagina. Felizmente, existe uma solução para isso: as custom properties do CSS.

Neste artigo, você vai descobrir o que são as custom properties do CSS e aprender como utilizá-las para criar designs mais flexíveis e escaláveis. Vamos lá?

O que são as custom properties do CSS?

Também conhecidas como variáveis CSS, as custom properties permitem definir valores personalizados e reutilizáveis no CSS. Ou seja, ao invés de repetir os mesmos valores diversas vezes no código, podemos definir uma variável uma única vez e utilizá-la em diversos elementos do site.

Um exemplo simples seria criar uma variável para a cor principal da marca. Ao invés de repetir o valor "#FF6347" diversas vezes no código, podemos definir a variável "–cor-principal: #FF6347" e utilizar essa variável em todos os elementos onde essa cor é necessária.

Como usar as custom properties do CSS?

Para criar uma custom property no CSS, basta utilizar o seguinte formato:

--nome-da-variavel: valor;

Por exemplo, para criar uma variável para a cor principal da marca, poderíamos utilizar o seguinte código:

:root {
  --cor-principal: #FF6347;
}

.logo {
  color: var(--cor-principal);
}

.menu {
  background-color: var(--cor-principal);
}

Repare que utilizamos a pseudo-classe :root para definir a variável globalmente, ou seja, ela estará disponível em todo o site. Em seguida, utilizamos a função var() para utilizar essa variável nos elementos desejados.

Como as custom properties podem ajudar no design?

As custom properties do CSS são extremamente úteis para criar designs mais flexíveis e escaláveis. Vamos ver alguns exemplos práticos:

Alterando a cor da marca

Imagine que, após algumas reuniões com o cliente, você precise alterar a cor principal da marca de "#FF6347" para "#008000". Se você tiver utilizado uma custom property para essa cor, basta alterar o valor da variável --cor-principal no arquivo CSS e todas as referências dessa cor serão atualizadas automaticamente.

Mudando o tamanho das fontes

Outro exemplo seria utilizar custom properties para definir o tamanho das fontes do site. Dessa forma, caso seja necessário aumentar ou diminuir as fontes em todo o site, basta alterar o valor das variáveis correspondentes e todas as fontes serão atualizadas automaticamente.

Adaptando o layout para diferentes dispositivos

As custom properties também podem ser utilizadas para adaptar o layout do site para diferentes dispositivos. Por exemplo, podemos criar uma variável para a largura máxima do conteúdo e utilizar essa variável nos elementos que precisam se adaptar à largura da tela.

Exemplo de uso das custom properties em um projeto real

Para ilustrar melhor como as custom properties podem ser utilizadas na prática, vamos analisar um trecho de código de um projeto real.

:root {
  --cor-principal: #42A5F5;
  --cor-secundaria: #FFB74D;
  --cor-fundo: #F5F5F5;
  --fonte-titulo: 'Montserrat', sans-serif;
  --fonte-paragrafo: 'Roboto', sans-serif;
}

body {
  color: var(--cor-principal);
  background-color: var(--cor-fundo);
  font-family: var(--fonte-paragrafo);
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  color: var(--cor-secundaria);
}

Nesse exemplo, utilizamos custom properties para definir as cores principais e secundárias do site, a cor de fundo, as fontes utilizadas nos títulos e parágrafos, entre outros valores. Dessa forma, se precisarmos modificar algum desses valores, basta alterar o valor correspondente da variável.

Conclusão

As custom properties do CSS são uma ferramenta poderosa para criar designs mais flexíveis e escaláveis. Ao utilizar variáveis no CSS, podemos evitar a repetição de código e facilitar a manutenção do projeto.

Esperamos que este artigo tenha sido útil para você e que possa aplicar esses conceitos em seus próximos projetos. Se tiver alguma dúvida ou sugestão, deixe um comentário abaixo.

"CSS é uma linguagem extremamente poderosa e versátil e cada vez mais recursos são adicionados à medida que novas necessidades surgem. Entre os mais recentes recursos adicionados ao CSS estão as custom properties." – Peter Gasston, CSS3 – Guia Prático para Desenvolvedores

Dicas práticas

1. Utilize nomes significativos para suas custom properties, evitando abreviações ou siglas pouco claras.
2. Defina as variáveis globais utilizando a pseudo-classe :root, para que elas estejam disponíveis em todo o site.
3. Utilize as custom properties em conjunto com funções como calc() e min()/max() para criar layouts mais flexíveis e adaptáveis.
4. Experimente utilizar as custom properties em conjunto com pré-processadores CSS, como Sass ou Less, para facilitar ainda mais o gerenciamento das variáveis.