Como e onde usar? 

Não existe um padrão de como você deva usar essa pseudo classe. MAS,  existe um formato que irá deixar seus arquivos mais organizados. Como? Bom, você pode separar seu css em partes. Podemos fazer essa divisão em várias partes, mas para esse exemplo separaremos apenas em dois arquivos: um css global e outro para o resto. 

CSS global: 

É aqui que você usará a pseudo classe :root. Vou te mostrar como: 

A forma de declarar é essa :root{..}. Mas e o que são esses nomes aí dentro?  São as variáveis que vão armazenar as informações. Você pode usar qualquer nome nessas variáveis, mas tem que obrigatoriamente colocar “--” antes desses nomes. 

Qual seria o melhor nome para dar às minhas variáveis? 

O melhor nome é aquele que define o que sua variável faz. Como assim? 

perceba, a primeira variável é “--cor-primaria”, ou seja, ali vamos armazenar a cor primária.

Entendeu? 

Mais um exemplo para fixar: 

Aqui estamos definindo um padrão para todos os titulos. 

Mas o que diabos é esse “var(...)”?

Esse var é nada mais nada menos que você “dizendo” pro css, “oh, esse valor aqui vai vir de uma variável que declarei anteriormente ”. Você percebeu que  isso já te ensina usar valores armazenados? viu como é fácil? 

Vamos só fixar mais: 

“Mas eu posso só copiar a cor e colar sempre que for utilizar algo como padrão”

Realmente! Isso fica fácil de se fazer quando seu css não tem 500 linhas…  Imagina toda vez que você for criar uma página nova e tiver que copiar e colar a  cor primária ao invés de só escrever o nome que você usou na variável.

O que escrever no css que não é global?

Você pode escrever todas as coisas que não serão um padrão no seu site. Claro que você pode fragmentar mais seu css, mas isso depende do seu projeto. 

Por hoje é só! Acompanhe a gente no instagram @minhastack

.