Quando escrevemos estilos, após o CSS da página ter sido modificado para várias versões, alguns estilos podem não ser mais usados, ou alguns estilos podem ter sido renomeados e os originais esquecidos de serem excluídos. conteúdo no estilo da página. Esses desperdícios inúteis de espaço no servidor e consumo de largura de banda também aumentarão nossos custos de manutenção. Então, há alguma maneira de limpar esses estilos inúteis? Hoje vamos dar uma olhada em algumas das ferramentas mais úteis.
Seletores Dust-Me
Dust-Me é um plug-in do Firefox muito útil e fácil de usar. Ele pode analisar todos os arquivos CSS chamados em sua página e aqueles que não são usados na página.
Suporta arquivos de estilo locais e remotos, incluindo arquivos de estilo introduzidos usando tags <link>, instruções de processamento <?xml-stylesheet?>, instruções @import, etc. (mas não suporta blocos <style> e estilos embutidos na página)
Suporta arquivos de estilo introduzidos em comentários condicionais do IE;
Você pode verificar uma única página ou o site inteiro;
Suporta seletores CSS1, a maioria dos seletores CSS2 e CSS3;
Entenda que hacks CSS comuns como "*html #fuck-ie" serão interpretados como "html #fuck-ie";
Suporta Firefox 3.5 e Firefox 3.0 Na verdade, graças às melhorias no motor js do FF 3.5, o desempenho no FF 3.5 é 50% superior ao do FF 3.0.
Instalação: Clique aqui. Ao mesmo tempo, você pode baixar o código-fonte do projeto. Para saber mais, visite a página oficial do seletor Dust-Me.
Velocidade da página
Page Speed é uma ferramenta de análise de desempenho de front-end fornecida pelo Google. É um pouco semelhante ao YSlow, mas fornece algumas ferramentas mais exclusivas e úteis, como Remover CSS não utilizado:
O Page Speed, assim como o YSlow, depende do Firebug. Para detalhes e instalação, visite aqui.
Verificador de redundância CSS
CSS Redundancy Checker é um aplicativo online gratuito que pode verificar todas as páginas que usam um determinado arquivo CSS em busca de estilos inúteis. Você pode verificar o uso de um determinado estilo em várias páginas ao mesmo tempo. A desvantagem desta ferramenta é que, embora possa verificar várias páginas HTML por vez, ela só pode verificar um arquivo CSS por vez e é necessário inseri-lo manualmente:
IDEIA do IntelliJ
IntelliJ IDEA Este é um IDE bastante poderoso, semelhante ao DreamWeaver, mas não é muito usado na China. O software inclui uma ferramenta de análise de código dinâmica que pode analisar classes e ids não utilizados em arquivos CSS.
Expressão Web
Expression Web, a ferramenta de desenvolvimento de sites de nova geração da Microsoft, ainda é usada por muitas pessoas. Sua função CSS Report pode verificar CSS não utilizado que precisa ser limpo (na verdade, nunca usei o EW para desenvolver um site. Espero que as crianças que usam este software possam. ajuda. Confira isso).
Conclusão
Claro, pode haver outras ferramentas que não são mencionadas aqui. Se você souber algo sobre isso, poderá compartilhá-las com todos.
Além disso, geralmente escrevemos os estilos de todo o site em um ou mais arquivos de estilo e, em seguida, chamamos todos eles na página ou em módulos. Então, os estilos em um determinado arquivo CSS podem não ser usados em uma determinada página, mas. são usados em uma determinada página. É usado em outras páginas, portanto, ao usar essas ferramentas para detectar estilos redundantes em arquivos CSS, você precisa ter cuidado. A limpeza dos estilos pode afetar outras páginas, portanto, os resultados da verificação fornecidos pelo Page Speed. aplica-se apenas a uma única página, não é adequado para todo o site; em vez disso, use Dust-Me ou Redundância CSS. Ao usar o Checker, você pode verificar todo o site ou várias páginas do site ao mesmo tempo, o que pode evitar erros.
PS: Muito obrigado ao trabalho da Knowledge Capsules.