Oi Franwille, tudo bem?
Sua pergunta é muito pertinente. A utilização do :root
em CSS é uma prática comum quando queremos definir variáveis globais para o nosso projeto. Isso é especialmente útil quando temos valores que se repetem várias vezes, como é o caso do "1.5rem" que você mencionou.
Neste caso, você poderia criar uma variável no :root
para esse valor, assim:
:root {
--font-size-padrao: 1.5rem;
}
E então, em vez de escrever 1.5rem
toda vez que você quiser definir o tamanho da fonte, você pode simplesmente usar a variável var(--font-size-padrao)
. Por exemplo:
.cabecalho__menu__link {
font-family: var(--font-secundaria);
font-size: var(--font-size-padrao);
font-weight: 600;
color: var(--cor-terciaria);
text-decoration: none;
}
Isso facilita muito a manutenção do código, pois se você decidir alterar o tamanho padrão da fonte no futuro, só precisará fazer a alteração em um lugar (no :root
), em vez de ter que procurar e alterar todas as ocorrências de 1.5rem
no seu CSS.
Um abraço e bons estudos.