Removendo classes CSS duplicadas

Vamos aprender a remover classes CSS duplicadas de forma simples e rápida.

Ao desenvolver algo grande e trabalhando com muitos membros, é difícil ter regras tão bem definidas ao codar, especialmente o código CSS (classes CSS).

Não podemos fazer com que os membros da equipe usem as mesmas classes CSS quando o projeto se torna grande demais. Acabamos nos perdendo em meio a tantas linhas.

O problema das classes duplicadas

Vamos imaginar um arquivo CSS com muitas linhas de código. A possibilidade de duplicar classes CSS criando erroneamente ou então enquanto mesclando o código, algumas das classes duplicadas podem estar lá. Como o CSS não é uma linguagem de programação, não haverá verificação de nomes de classes que aconteceria automaticamente.

Vamos imaginar um arquivo CSS com muitas linhas de código. A possibilidade de acabarmos duplicando classes, criando erroneamente algo que já foi definido, mas com algumas dependências e até casos onde precisamos mesclar dois arquivos vai gerar classes duplicadas.

Se não as removermos, elas residirão nos arquivos CSS que são o custo dos dados que são transferidos para o site.

Então é melhor fazer uma boa verificação disso.

A solução: DupChecker

A dica que vou dar é para quem usa o VSCode, já que ele tem uma extensão que vai nos ajudar muito. O nome dela é DupChecker.

Você pode abrir o link acima e instalar ou seguir os seguintes passos no seu VSCode:

Passos para instalação e uso

Vá para a guia de extensões (Ctrl + Shift + X).
Pesquise por "DupChecker" e instale-o.
Vá para o arquivo CSS.
Aperte (Ctrl + Shift + P) e pesquise "check duplicates with regex match" e selecione-a.
Cole este regex ^.[\w-\s.>:,[]*=]+{ e pressione Enter.
Irá abrir um terminal informando as classes que estão duplicadas.

Pronto!

Nota: Entre os resultados pode-se mostrar classes concatenadas. Tenha cuidado ao remover.