Actualmente a Internet tem uma enorme vertente visual que é produzida maioritariamente pelos ficheiros denominados style sheets, que têm a extensão .CSS. Estes ficheiros basicamente definem as propriedades visuais de cada pormenor de uma página web. São por isso um aspecto que os web designers dão muita importância na realização de páginas web. Ora, o tipo de ficheiros CSS permite adicionar comentários, para ajudar os web designers a enquadrar-se no seu trabalho e ainda tem uma filosofia bastante importante que é a indentação, ou seja, a estruturação do ficheiro através de espaços.

Todos estes pormenores do CSS, tanto os espaços como os comentários são desnecessários para os browsers, mas importantíssimos para a produtividade dos web designers. Como actualmente as páginas da Internet são cada vez mais pesadas, os programadores devem ter o máximo de cuidado na sua realização, reduzindo o máximo de tamanho que puderem em todos os aspectos da página. É neste sentido que este artigo se enquadra: este artigo tem como único objectivo comprimir e optimizar o CSS das suas páginas para que ocupe bem menos espaço aumentando assim o SEO da página.

Este artigo foi redigido exactamente porque o Ubuntued está a ter grande evolução ao nível visual, o que traz alguns problemas de optimização. Um desses problemas é exactamente este explicado no artigo: demasiado espaço ocupado pelos ficheiros de estilos CSS. Ora, como actualmente é extremamente importante ter as páginas da Internet optimizadas para os motores de pesquisa (SEO), então é necessário que os ficheiros CSS, não ocupem demasiado espaço. Existe muitos estudos que indicam que os ficheiros CSS devem ter um tamanho máximo que a partir do qual os motores de busca não gostam.

No sentido de optimizar então as páginas para os motores de busca (SEO), este artigo apresenta um programa chamado csstidy. O csstidy é um excelente programa que transforma qualquer ficheiro CSS num ficheiro CSS optimizado (caso consiga, claro). Basicamente, o que este programa faz é: reduzir os espaços que os programadores põem para melhor visualizarem a estrutura do ficheiro; e eliminar todos os comentários que programadores utilizam, e muito bem, para melhorarem a visibilidade e consequente produtividade. Esta limpeza não afecta rigorosamente nada o aspecto do seu site pois os browsers não lêem os espaços nem muito menos lêem os comentários do CSS.

Para além disso, csstidy, ainda faz muitas outras optimizações que, novamente, não afectam rigorosamente nada o aspecto do seu site, nomeadamente:

• Optimização das cores principais, por exemplo passa de #000000 para #000;
• Propriedades que sejam sobrepostas por outras são removidas;
• Nas propriedades com valores nulos são removidas as suas métricas, por exemplo quando se tem 0px, o csstidy optimiza para 0.
• Propriedades como “margin:2px 2px 2px 2px;” são substituídas por “margin:2px;” ou até propriedades bem maiores que são optimizadas para algo assim bem mais pequeno.

Todas estas optimizações podem ser vistas na página oficial do csstidy, por isso, caso tenha curiosidade em saber mais sobre esta excelente aplicação, que é open-source e funciona tanto no Ubuntu como no Windows e no MacOS, então clique aqui.

Instalação

A instalação do csstidy é extremamente simples. Este é o tipo de instalação que faz ver aos outros dois sistemas operativos referidos no parágrafo anterior, pois é o tipo de instalação mais simples que o Ubuntu proporciona: clicando no botão apresentado a seguir (no caso de preferir, pode instalar através do código apresentado também a seguir):

Depois da instalação estar concluída, o csstidy fica imediatamente disponível e pronto a ser utilizado.

Como funciona o CSStidy?

O csstidy apesar de ser uma funcionalidade extremamente importante para qualquer web designer, pode não agradar toda a gente, pois tem um vertente que muitos utilizadores não gostam: o csstidy funciona apenas via terminal. Creio que este aspecto não deve ser considerado negativo ao ponto de deixar de o utilizar, pois a sua utilização é extremamente simples e, tal como verá de seguida, as suas funcionalidades resumem-se a três tipos de execução e nada mais.

Caso não se sinta confortável a utilizar o terminal, então recomendo que antes de começar a utilizar estes comandos a seguir, navegue para a pasta onde se encontram os ficheiros CSS. No caso de não saber como fazer isso, veja este artigo: “Abrir terminal numa determinada pasta“.

Sendo assim, tendo em conta que já está na pasta dos seus ficheiros CSS, e agora supondo que tem um ficheiro CSS chamado style.css, então uma das compressões possíveis, seria por exemplo a seguinte:

Este comando chama o programa csstidy, dá-lhe o ficheiro style.css, indica-lhe que quer o nível de compressão low, ou seja, mais baixo possível e ainda indica que quer que o nome do ficheiro resultante da compressão tenha o nome de style2.css.

Tal como pôde verificar, a utilização foi extremamente simples e, basicamente, funciona sempre da mesma maneira, ou seja, chama o programa, indica-lhe qual o ficheiro a comprimir, indica o tipo de compressão e por fim indica o nome do ficheiro resultante (que pode ser o mesmo). Tendo em conta que já sabe o básico desta aplicação, então só lhe falta saber que outras funcionalidades esta aplicação ainda lhe proporciona. Essas funcionalidades não são muitas, aliás, são poucas! Uma delas é a já referida escolha do tipo de compressão. No exemplo referido acima, foi apresentado o tipo de compressão mais básico, no entanto, existem mais dois tipos de compressão, o high e o highest. Tendo em conta que isto é processado muito rapidamente e o resultado é sempre satisfatório no final, ou seja, nunca ocorre problemas, então eu recomendo que utilize sempre a compressão máxima, ou seja, a highest.

A única condicionante da compressão máxima (do tipo highest) é o facto do ficheiro resultado ser ilegível, ou melhor, ser extremamente complicado de ler, visto que o programa remove todos os espaços e mudanças de linha. Então, o que recomendo é que utilize esta compressão apenas quando achar que o ficheiro CSS está finalizado, ou seja, que não o irá modificar mais. Então, nesse caso, utiliza este tipo de compressão (ver comando a seguir) criando um novo ficheiro e guardando o original. Assim, caso precise de alterar o ficheiro CSS, altera o original e depois volta a comprimir para ser utilizado no site.

Por fim, outra funcionalidade que você pode utilizar, que não está intrinsecamente ligada ao programa, é o facto de você não precisar de estar na pasta onde se encontram os ficheiros CSS. Apenas indiquei para navegar para a pasta para os utilizadores que se sentem menos confortáveis no terminal. Caso se sinta confortável a utilizar a consola, então pode utilizar este comando sem estar na pasta dos ficheiros CSS.

Ora, esta funcionalidade é extremamente importante para criar ficheiros resultantes da compressão, pois pode comprimir os seus ficheiros CSS em ficheiros com o mesmo nome, mas noutra pasta. Por exemplo, tal como poderá ver no vídeo abaixo, o que fiz foi o seguinte: criei uma pasta temporária na pasta dos ficheiros CSS e em todas as compressões e optimizações dos CSSs indiquei que o ficheiro resultante teria o mesmo nome mas que estaria na pasta temporária, ou seja, algo deste género:

Antes de apresentar o vídeo, refere-se apenas no facto de que estas compressões podem ter um impacto bastante grande no tamanho do ficheiro, o que resulta numa redução do uso do servidor onde se encontra o CSS, bem como uma redução no tempo de espera do utilizador aquando da abertura da página. Os níveis de compressão no vídeo apresentado rondaram os 45% (tal como pode ver também na segunda imagem do artigo) e são ficheiros reais, utilizados no Ubuntued!

Referências:

Optimize and Compress CSS Files;
Homepage do csstidy;
Cascading Style Sheets (CSS) – Wikipedia;
Search engine optimization (SEO) – Wikipedia.