1

O que são Custom Properties (e porque você deveria usá-las)

#CSS
Alessandro Araújo
Alessandro Araújo

O que são as Custom Properties?


As custom properties (propriedades customizadas, em português) são variáveis utilizadas nas folhas de estilo, ou seja, nos arquivos CSS.


Elas podem guardar valores que seriam utilizados para determinadas propriedades, como cores e tamanhos, por exemplo.


Como utilizar as variáveis em CSS?


Para definir propriedades customizadas, devemos ter em mente que toda variável em CSS começa com dois sinais de travessão (--).


Após os dois sinais de travessão, podemos escrever o nome que desejarmos para a variável.


Hora do código!


Suponha que, enquanto editamos um H1, queremos guardar a cor branca #FFF dentro de uma variável, para utilizá-la posteriormente.


Chamando-a de color-white, devemos declará-la da seguinte forma:


h1 {
  --color-white: #FFF; 
}


Para utilizá-la posteriormente como cor de fundo, devemos usar a estrutura var(), colocando o nome da variável entre parênteses, como no seguinte exemplo:


h1 {
  --color-white: #FFF; 
  background-color: var(--color-white);
}


Infelizmente, criando a variável desta forma, ela ficará disponível apenas para o título H1 e seus filhos (elementos que estão em seu interior).


Veremos, a seguir, como criar variáveis que podem ser utilizadas ao editar quaisquer elementos de um documento HTML.


Custom Properties válidas para todos os elementos


Pela lógica, para utilizar as custom properties já criadas ao editar qualquer elemento, devemos criá-las em um elemento suficientemente "alto" a ponto de conter todos os outros elementos.


Uma dica é criá-las editando o elemento :root ("raíz"), que existe, mas não é visível.


:root {
  --color-white: #FFF;
} 


Dessa forma, as variáveis ficarão disponíveis até mesmo em outros arquivos CSS, contanto que estejam conectados a um mesmo arquivo HTML.


Quais as vantagens de utilizar as Custom Properties?


As variáveis em CSS são muito úteis durante a organização dos códigos das folhas de estilo.


Em sites muito grandes, que possuem muitas páginas e muitos elementos a serem editados, é útil definir variáveis que contenham valores que serão frequentemente utilizados durante a estilização dos elementos dos arquivos HTML, visto que elas tornarão os arquivos CSS mais organizados e mais fáceis de serem compreendidos pelos programadores.


Quer saber mais sobre as Custom Properties?


Você também pode conferir a documentação disponibilizada pela Mozilla através do seguinte link: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties


Além disso, no site da Digital Innovation One, você pode encontrar cursos sobre o desenvolvimento de sites com HTML e CSS. Visite a plataforma por este link: https://digitalinnovation.one


Vamos interagir?


Deixe nos comentários o que sabe sobre as folhas de estilo ou manifeste sua opinião sobre o artigo (0 - 0).

0
43

Comentários (0)

Sou um jovem em busca de conhecimento.

Brasil