Ir para o conteúdo

Localizador de seletores CSS não utilizados

Compare uma folha de estilos com uma página HTML e liste os seletores que não correspondem a nada.

Entrada
HTML

Localizador de seletores CSS não utilizados

Cole uma folha de estilos num lado e o HTML que ela estiliza do outro, e esta ferramenta lista cada seletor que não corresponde a um único elemento na página. É uma forma rápida de encontrar regras mortas deixadas após um redesenho, a remoção de um componente, ou meses de CSS copiado — o tipo de desperdício que é tedioso procurar a olho nu num ficheiro com centenas de regras.

"Ignorar pseudo-classes e pseudo-elementos" compara uma regra como .button:hover como simples .button, pois um instantâneo HTML estático não consegue mostrar o estado de hover ou foco; deixe desligado e a ferramenta verifica os que consegue com segurança — first-child, last-child, nth-child e not — contra a posição real de cada elemento. "Ignorar seletores que correspondem" aceita uma expressão regular, ou um fragmento de texto simples como alternativa, para excluir classes que um script alterna em tempo de execução, como qualquer coisa começando com js- ou is-active, para que nunca sejam marcadas como mortas. "Mostrar classes/IDs HTML sem regra CSS" inverte a comparação, útil para encontrar erros de digitação em nomes de classes. "Incluir seletores dentro de @media" verifica regras de media query da mesma forma que o resto da folha, ou as ignora quando desligado. Mude o resultado para "CSS limpo" para obter a folha de estilos de volta com cada regra não utilizada removida.

A comparação funciona contra a estrutura HTML conforme escrita — marcação injetada por um script após o carregamento da página não está no instantâneo colado, por isso verifique duas vezes antes de apagar uma regra. Seletores combinados com vírgulas são verificados individualmente, portanto uma regra cobrindo duas classes de uma só vez é apenas removida uma vez que ambas estão confirmadas como não utilizadas.

Tudo acontece no seu navegador: o CSS e HTML que cola nunca são carregados em lugar nenhum. Copie o resultado, descarregue-o como um ficheiro .txt, ou envie-o diretamente de volta para a entrada para executar outro passe.

FAQ

Verifica seletores dentro de @media, @supports e @keyframes?
Seletores dentro de @media são verificados como qualquer outra regra, com uma opção para os ignorar se preferir. Outras at-rules como @font-face e @keyframes não têm seletores de elemento para comparar, portanto são deixados intactos.
Consegue detectar classes que JavaScript adiciona ou remove?
Não — a correspondência é feita contra o HTML que cola, não uma página ao vivo com script. Use a opção ignore-pattern para excluir classes que sabe que são alternadas por JavaScript, como is-open ou js-active, para que não sejam reportadas como não utilizadas.
O que acontece a combinadores como seletores de filho ou irmão?
A ferramenta segue a cadeia completa de seletor — descendente, filho, irmão adjacente e irmão geral — contra a estrutura do HTML colado, não apenas o nome de classe final.
Por que um seletor que sei que é usado ainda está listado como não utilizado?
Na maioria das vezes, o HTML que o usa não foi colado, ou é adicionado dinamicamente após o carregamento da página. Cole a marcação completa renderizada, ou exclua o seletor com a opção ignore-pattern se for aplicado por um script.
CSS ou HTML meu é carregado para algum lugar?
Não. A comparação funciona inteiramente no seu navegador — nem a folha de estilos nem a marcação que cola sai do seu dispositivo.