Como encontrar estilos CSS não usados com o Chrome Dev Tools

Publicado em: Css / Sass
467 visualizações

As ferramentas para desenvolvedores do Google Chrome permitem analisar rapidamente o conteúdo/recursos de uma página da web.

No vídeo abaixo irei mostrar como usar o Chrome DevTools para encontrar códigos CSS não utilizados. A remoção do código não utilizado pode acelerar o carregamento da página e economizar os dados de celular dos usuários móveis.

No teste será mostrado quais recursos foram analisados e quanto código é usado em cada recurso. Clique em uma linha para abrir esse recurso no painel “Sources” e veja um detalhamento linha por linha do código usado e do código não utilizado.

Quaisquer linhas de código não utilizadas terão uma linha vermelha no início.

Com essa técnica demonstrada no vídeo, será possível analisar os arquivos CSS do seu site que se tornam muito grandes as vezes. Geralmente isso acontece quando você constrói novas classes sem excluir as antigas que agora parou de usar, tornando o arquivo CSS muito confuso para que outros desenvolvedores entendam e façam suas contribuições.