Para facilitar a manutenção e evitar múltiplas alterações manuais, o ideal é usar uma variável CSS para definir a cor uma vez e reutilizá-la em todos os lugares onde ela é aplicada. Com isso, se precisar alterar a cor, bastará modificar o valor da variável, e todos os elementos que a usam serão atualizados automaticamente.
Aqui está um exemplo de como fazer isso:
Defina uma variável CSS para a cor no início do seu arquivo CSS, por exemplo, dentro do seletor :root (assim, a variável estará disponível globalmente):
:root {
--cor-principal: #22D4FD;
}
Substitua a cor fixa pela variável em cada lugar onde ela foi usada:
.titulo-destaque { color: var(--cor-principal); }
.apresentacao__links__link { border: 2px solid var(--cor-principal); }
.rodape { background-color: var(--cor-principal); }
.cabecalho__menu__link { color: var(--cor-principal); }
Para alterar a cor, basta mudar o valor da variável no seletor :root:
:root {
--cor-principal: #f222fd;
}
Essa prática torna o código mais limpo e facilita futuras alterações, especialmente em projetos com muitos elementos que compartilham a mesma cor.
