Como resolver problemas de CSS não utilizados

Estou executando alguns testes rápidos em um blog e sempre recebo reclamações sobre CSS não utilizado. Mas este não é um CSS que eu nunca uso, apenas não é usado nessa página em particular.

Agora, trabalho de maneira estruturada, mas ainda precisa haver algum CSS no arquivo que não será usado, porque você precisa dele em outra página.

Eu não acho que o uso de arquivos CSS diferentes em páginas diferentes seja o caminho a percorrer, acho que é muito melhor criar um arquivo grande que possa ser armazenado em cache.

Agora existe uma maneira elegante de lidar com isso, ou você apenas se apega a isso.

Sua afirmação de que você está melhor com um arquivo CSS maior está correta. Provavelmente, serão apenas alguns KB quando compactados e devem ser armazenados em cache, para que não haja uma sobrecarga enorme. Existem algumas coisas que vale a pena conferir.

Se algum CSS for usado apenas em uma página, talvez seja melhor colocar o CSS na página, em algumas tags de estilo. (Observação: isso pode dificultar a manutenção das coisas, principalmente quando você decide usar um estilo semelhante em outro lugar.)

Se você pegar suas páginas mais populares (por exemplo, as páginas que compõem mais de 50% de suas visualizações de página) e descobrir que apenas uma quantidade muito pequena de seu CSS está sendo usada nessas páginas, pode ser mais rápido para os usuários dividi-las em dois arquivos CSS. Agora, os novos usuários que visitam suas páginas mais populares têm muito menos para baixar. Em outras páginas, há uma solicitação HTTP extra, mas isso não é grande coisa.

Verifique se o seu CSS está bem otimizado. Evite seletores descendentes sempre que possível. Se o lado direito de um seletor for muito genérico, poderá diminuir o tempo de renderização. Por exemplo, .class div {}seria um pouco lento porque o navegador precisa verificar todos os <div>elementos da página e, em seguida, procure a árvore DOM no topo para encontrar (ou não) um elemento com a classe.

Eu acho que isso é uma falha da ferramenta speedtest que você está usando, que não olha o site inteiro e vê qual CSS nunca é usado. Se você encontrar uma ferramenta que faça isso, avise-nos!

Eu acho que você está muito melhor criando um arquivo grande que pode ser armazenado em cache.

Sim, isso faz sentido, a menos que haja um conjunto de páginas que precisam de um pouco mais de CSS; nesse caso, você pode incluí-lo nessas.

Há um pequeno plug-in do Firefox, chamado Dust-Me Selectors , que verifica seu CSS e relata quaisquer regras não utilizadas. No entanto, ele não funciona com a versão mais recente do Firefox (v8.0), o que é uma pena.

PS: Se eu fosse você, levaria CSS Lint com uma pitada de sal - há uma escola de pensamento que diz que suas “recomendações” são pedantes e apenas um exagero total. (Para mais detalhes, consulte o artigo persuasivo de Matt Wilcox, “ CSS Lint is prejudicial ” ). Na melhor das hipóteses, é completamente não-oficial ... e, vamos enfrentá-lo, nós realmente precisamos mais uma ferramenta / pseudo-padrão para satisfazer?

A maneira mais otimizada e escalável que posso imaginar para lidar com isso consiste em:

1. Criar um arquivo CSS principal para tudo relacionado ao "escopo global" (como design do site, classes globais, bibliotecas, plugins, etc ...).

2. Criando um sistema envolvendo uma pasta contendo um arquivo CSS exclusivo por páginas (somente se necessário). Esses arquivos podem ter o mesmo nome de arquivo da página à qual está vinculado, para que você possa executar um script do lado do servidor em cada página que procure um arquivo CSS nessa pasta e adicione-o à página, se houver.

3. Talvez, criando arquivos CSS diferentes para itens específicos do navegador que você carrega apenas quando o visitante tem o navegador relativo.

Ao fazer isso, você terminará com uma maneira sólida e otimizada de separar seu CSS. Sim, ainda haverá regras não utilizadas no arquivo principal, mas elas estarão onde deveriam estar do ponto de vista lógico.

Lembre-se também de que essas três "camadas" de arquivos CSS serão armazenadas em cache, como seria um único arquivo CSS.