Csstidy - analisador e otimizador de código css

Colaboração: Rubens Queiroz de Almeida

Data de Publicação: 13 de junho de 2014

O aplicativo csstidy é um analisador e otimizador de código css. Está disponível como código executável para os ambientes Windows, GNU/Linux e OSX). Pode ser usado tanto através da linha de comandos como na forma de um script PHP.

Rodando o comando na folha de estilos da Dicas-L, além de aprender mais um pouco sobre a melhor forma de codificar o css, dá para ver também que é possível diminuir bastante o tamanho do arquivo.

Reproduzo a seguir um pequeno trecho das modificações sugeridas pelo programa:

  csstidy style.css Style.css 
  
  Selectors: 42 | Properties: 193
  Input size: 5.707KiB  Output size: 4.091KiB  Compression ratio: 28.32%
  -----------------------------------
  
  4: Optimised number: Changed "0px" to "0"
  5: Optimised number: Changed "0px" to "0"
  14: Optimised color: Changed "black" to "#000"
  16: Optimised color: Changed "rgb(255,255,255)" to "#FFF"
  55: Optimised number: Changed "0px" to "0"
  55: Optimised shorthand notation (margin): Changed "0 0 0 0" to "0"
  56: Optimised number: Changed "0px" to "0"
  93: Optimised shorthand notation (margin): Changed "10px 10px 10px 10px" to "10px"
  94: Optimised number: Changed "0px" to "0"
  97: Invalid property in CSS2.1: border-radius
  98: Optimised color: Changed "#888888" to "#888"
  98: Invalid property in CSS2.1: box-shadow
  100: Optimised color: Changed "black" to "#000"
  101: Optimised color: Changed "yellow" to "#FF0"
  106: Optimised color: Changed "#3300CC" to "#30C"
  108: Optimised font-weight: Changed "normal" to "400"
  113: Optimised color: Changed "white" to "#FFF"
  227: Fixed invalid color name: Changed "lightgrey" to "#D3D3D3"

A primeira coisa que notei é a taxa de compressão obtida: 28.32%. É muita coisa, principalmente levando-se em conta que a folha de estilos é carregada em cada página que o servidor web oferece. O benefício é duplo, as páginas de seu site irão carregar mais rapidamente, proporcionando uma melhor experiência aos seus usuários e o seu uso de banda será reduzido.

Outro exemplo, na definição do parâmetro margin, eu costumo especificar os quatro valores: margens esquerda e direita, e margens superiores e inferiores. Se o valor for o mesmo, basta especificar apenas uma vez que por padrão os demais campos assumem o mesmo valor.

  55: Optimised shorthand notation (margin): Changed "0 0 0 0" to "0"

Para instalar em sistemas Debian GNU/Linux e derivados, digitar:

  % sudo apt-get install csstidy