Dicas de ferramentas utilizadas para auditoria do CSS

Auditar o CSS não é uma tarefa comum no cotidiano de um desenvolvedor, mas às vezes você só tem que fazê-lo. Talvez seja parte de uma revisão de desempenho para identificar CSS críticos e reduzir seletores nãousados. Talvez seja parte do esforço para melhorar a acessibilidade onde todas as cores usadas na base de código avaliadas para contraste. Pode até ser para impor consistência!

Seja qual for o caso e sempre que esse momento chegar, eu costumo pegar algumas das ferramentas que vou cobrir no artigo. Mas antes disso, vamos ver o que significa “auditar” o CSS em primeiro lugar.

Auditar CSS é difícil

Geralmente, a auditoria de código envolve a análise de código para encontrar bugs ou outras irregularidades, como possíveis problemas de desempenho. Para a maioria das linguagens de programação, o conceito de código de auditoria é relativamente simples: funciona ou não. Mas o CSS é uma linguagem específica onde os erros são ignorados principalmente pelos navegadores. Então há o fato de que você poderia alcançar o mesmo estilo de muitas maneiras diferentes. Isso torna o CSS um pouco complicado de auditar, para dizer o mínimo.

Encontrar esses erros pode ser evitado usando uma extensão para o seu editor de código favorito ou configurando um linter ou verificador de código. Mas não é isso que eu quero mostrar aqui, e isso não é suficiente. Ainda podemos usar muitas cores, definições tipográficas ou índices z, o que poderia levar a uma base CSS confusa, insustentabilidade e instável.

Para realmente auditar o CSS, precisaríamos cavar mais fundo e encontrar lugares que não sejam considerados melhores práticas. Para encontrar esses lugares, poderíamos usar as seguintes ferramentas.

DevTools do navegador

Vamos dar uma olhada nas ferramentas do Chrome DevTools para auditoria CSS. Estou usando brave aqui, que é baseado em Cromo.

Se você gosta de inspecionar o código CSS manualmente, existe a ferramenta Inspecionar. Usando isso, pudemos ver o código CSS aplicado a um elemento específico. Usando a “Seta de inspeção” pudemos até ver detalhes adicionais sobre cores, fontes, tamanho e acessibilidade.

Inspetor de grade e flex

Há muitos detalhes práticos na interface DevTools, mas meu favorito é o inspetor Grid e Flex. Para habilitá-los, vá para as Configurações (um pequeno ícone de engrenagem no canto superior direito dos DevTools), clique em Experimentos e, em seguida, habilite os recursos de depuração de CSS Grid e Flexbox. Embora esta ferramenta seja usada principalmente para depurar problemas de layout, às vezes uso-a para determinar rapidamente se o CSS Grid ou o Flexbox são usados na página.

Visão geral do CSS

Inspecionar CSS é bastante básico, e tudo precisa ser feito manualmente. Vamos ver alguns recursos mais avançados do DevTools.

CSS Visão geral é um deles. Para ativar a ferramenta Visão geral do CSS, vá para as Configurações, clique em Experimentos e habilite a opção Visão geral do CSS. Para abrir o painel visão geral do CSS, você pode usar o atalho +++, digitar “css visão geral” e selecionar “Mostrar visão geral do CSS”. Esta ferramenta resume propriedades CSS como cores, fontes, questões de contraste, declarações não usadas e consultas de mídia. Eu costumo usar esta ferramenta para obter a “sensação” de quão bom ou pobre código CSS é. Por exemplo, se há “50 tons de cinza” ou muitas definições tipográficas, isso significa que o guia de estilo não foi respeitado, ou talvez nem exista. CMDShiftP

Observe que esta ferramenta resume o estilo aplicado a uma página específica, não a todo o arquivo.

Painel de cobertura

A ferramenta Cobertura mostra o valor e a porcentagem do código utilizado na página. Para visualizá-lo, use o atalho ++”, digite “cobertura”, selecione Mostrar cobertura e clique no ícone “atualizar”.CMDShiftP

Você pode filtrar apenas arquivos CSS digitando “.css” na entrada do filtro URL. Costumo usar essa ferramenta para entender a técnica de entrega do site. Por exemplo, se eu ver que a cobertura é muito alta, eu poderia assumir que o arquivo CSS é gerado para cada página separadamente. Pode não ser dados críticos para saber, mas às vezes ajuda a entender a estratégia de cache.

Painel de renderização

O painel Rendering é outra ferramenta útil. Para abrir o painel Renderização, use ++ novamente, digite “renderização” desta vez e escolha a opção “Renderização de show”. Esta ferramenta tem muitas opções, mas as minhas favoritas são:CMDShiftP

  • Pintura piscando — mostra retângulos verdes quando um evento de repintação acontece. Eu uso-o para identificar áreas que levam muito tempo para renderização.
  • Regiões de mudança de layout — mostra retângulos azuis quando ocorre a mudança de layout. Para aproveitar ao máximo essas opções, costumo definir a predefinição “Slow 3G” na aba “Rede”. Às vezes eu gravo minha tela e depois abrando o vídeo para encontrar as mudanças de layout.
  • Estatísticas de renderização de quadros — mostra o uso em tempo real de GPU e quadros. Esta ferramenta é útil ao identificar animações pesadas e problemas de rolagem.

Essas ferramentas são algo que a auditoria regular não implica, mas acho essencial entender se o código CSS é executante e não drena a energia de um dispositivo.

Outras opções podem ser mais benéficas para depurar problemas, como emulação e desativação de vários recursos, forçando o tipo de mídia de impressão ou recurso e desativando fontes locais. prefers-color-scheme

Monitor de desempenho

Outra ferramenta para auditar o código CSS de desempenho é o Monitor de Desempenho. Para habilitá-lo, use ++ novamente, digite “monitor de desempenho” e selecione a opção Mostrar monitor de desempenho. Eu costumo usar esta ferramenta para ver quantos recálculos e layouts são acionados ao interagir com a página, ou quando a animação ocorre. CMDShiftP

Painel perfomance

O painel Performance mostra uma exibição detalhada de todos os eventos do navegador durante a carga da página. Para ativar a ferramenta Desempenho, digite ++, digite “performance”, selecione Mostrar desempenho e clique no ícone “recarregar”. Eu costumo habilitar as opções “Screenshots” e “Web Vitals”. As métricas mais interessantes para mim são First Paint, First Contentful Paint, Layout Shifts e Largest Contentful Paint. Há também um gráfico de tortas mostrando o tempo de pintura e renderização. CMDShiftP

O DevTools pode não ser considerado uma ferramenta clássica de auditoria, mas nos ajuda a entender quais recursos de CSS são usados, a eficiência do código e como ele funciona — todos os quais são coisas fundamentais para auditar.

Ferramentas online

DevTools é apenas uma ferramenta que é embalada com um monte de recursos. Mas existem outras ferramentas disponíveis que podemos usar para auditar o CSS.

Visualizador de especificidade

O visualizador de especificidade mostra a especificidade dos seletores CSS na base de código. Basta acessar o site e colar no CSS.

O gráfico principal exibe a especificidade em relação à localização na folha de estilos. Os outros dois gráficos mostram o uso de especificidades. Eu costumo usar este site para encontrar seletores “ruins”. Por exemplo, se eu vejo muitas especificidades marcadas como vermelhas, eu poderia facilmente concluir que o código poderia ser melhor. É útil salvar as capturas de tela para referência enquanto você trabalha para melhorar as coisas.

Gerador de gráficos de especificidade CSS

O Gerador de Gráficos de Especificidade CSS é uma ferramenta semelhante para visualizar especificidades. Ele mostra um gráfico ligeiramente diferente que pode ajudá-lo a ver como seus seletores CSS são organizados por especificidade. Como diz na página da ferramenta, “os picos são ruins, e a tendência geral deve ser para maior especificidade mais tarde na folha de estilo”. Seria interessante discutir isso mais adiante, mas está fora de alcance para este artigo. No entanto, Harry Roberts escreveu sobre isso extensivamente em seu artigo “The Specificity Graph” que vale a pena conferir.

Estatísticas de CSS

O CSS Stats é outra ferramenta que fornece análises e visualizações para suas planilhas de estilo. Na verdade, Robin escreveu sobre isso um pouco atrás e mostrou como ele usou para auditar a folha de estilo em seu trabalho.

Tudo o que você precisa fazer é digitar a URL do site e bater . As informações são segmentadas em seções significativas, da contagem de declarações às cores, tipografia, z-indexes, especificidade e muito mais. Novamente, você pode querer armazenar as capturas de tela para referência posterior.Enter

Projeto Wallace

Project Wallace é feito por Bart Veneman, que já introduziu o projeto aqui no CSS-Tricks. O poder do Projeto Wallace é que ele pode comparar e visualizar mudanças com base nas importações. Isso significa que você pode ver estados anteriores da sua base de código CSS e ver como seu código muda entre estados. Eu acho este recurso bastante útil, especialmente quando você quer convencer alguém de que o código é melhorado. A ferramenta é gratuita para um único projeto e oferece planos pagos para mais projetos.

Ferramentas CLI

Além do DevTools e ferramentas online, existem ferramentas de interface de linha de comando (CLI) que podem ajudar a auditar o CSS.

Wallace

Uma das minhas ferramentas cli favoritas é Wallace. Uma vez instalado, digite e, em seguida, o nome do site. A saída mostra tudo o que você precisa saber sobre o código CSS para o site. Minhas coisas favoritas para olhar são o número de vezes que é usado, bem como quantas IDs estão no código. Outra informação pura é o número de especificidade superior e quantos seletores as usam. Podem ser bandeiras vermelhas para o código “ruim”.wallace!important

O que eu mais gosto nesta ferramenta é que ela extrai todo o código CSS do site, não apenas arquivos externos, mas também código inline também. É por isso que o relatório da CSS Stats e Wallace não se decompondo.

csscss

A ferramenta CSSSSS CLI mostra quais regras compartilham as mesmas declarações. Isso é útil para identificar códigos duplicados e oportunidades para reduzir a quantidade de código que está escrito. Eu pensaria duas vezes antes de fazer isso, pois pode não valer a pena, especialmente com os mecanismos de cache de hoje. Vale ressaltar que csscss requer Ruby.

Outras ferramentas úteis

Outras ferramentas CSS podem não ser usadas para auditoria, mas ainda são úteis. Vamos listar isso também:

  • Color Sorter — Classifique as cores CSS por tonalidade, depois por saturação.
  • Analisador CSS — Gere uma análise para uma sequência de CSS.
  • constípero — Este é um linter de complexidade CSS, baseado no Analisador CSS.
  • Extrair CSS Agora — Obtenha todo o CSS de uma única página web.
  • Obter CSS — Raspe todo o CSS de uma página.
  • uCSS — Rastreule sites para identificar CSS nãoused.

Conclusão

CSS está em todos os lugares ao nosso redor, e precisamos considerá-lo um cidadão de primeira classe de cada projeto. Não importa o que as outras pessoas pensam sobre o seu CSS, mas o que você pensa sobre isso realmente importa. Se o seu CSS estiver organizado e bem escrito, você gastará menos tempo depurando-o e mais tempo desenvolvendo novos recursos. Em um mundo ideal, educaríamos todos para escrever um bom CSS, mas isso leva tempo.

Que hoje seja o dia em que você começar a cuidar do seu código CSS.

Sei que auditar css não vai ser divertido para todos. Mas se você executar o seu código contra qualquer uma dessas ferramentas e tentar melhorar até mesmo uma parte da sua base de código CSS, então este post fez o seu trabalho.

Estou pensando no código CSS cada vez mais ultimamente, e estou tentando fazer com que mais desenvolvedores escrevam código CSS com mais respeito. Até iniciei um novo projeto na css-auditors.com (yay para nomes de domínio hifenizado!) que é dedicado à auditoria do CSS.

Se você souber de outras ferramentas, me avise nos comentários.