pixeladas aleatórias

Há várias formas de deixar seu CSS levinho, levinho. Algumas são automáticas, mas as melhores mesmo são aquelas que exigem apenas um pouco de disciplina e atenção na hora de evoluir com o código e a montagem.

Os melhores métodos para diminuir o tamanho dos arquivos passam por configurações no servidor. Compressão GZIP e configuração do “expires” estão entre os meus métodos favoritos. Mas nem sempre o desenvolvedor tem permissões para fazer isso ou solicitar. Aqui seguem algumas dicas de fazer otimização no CSS que não precisam de mais ninguém a não ser o próprio desenvolvedor de interfaces.

Diminuindo o número de requests

Alguns layouts exigem vários pedacinhos de botões, fundos, setas, efeitos. Cada uma das imagens recortada pode ser bem pequena, 1Kb apenas, mas para cada arquivo solicitado para o servidor há outro 1Kb referente à requisição do arquivo. Algumas sugestões para não sofrer na mão dos requests são:

• Procurar imagens .gif ou .png que utilizem a mesma palheta de cores e condensá-las num mesmo arquivo. Se for usar como fundo, use posicionamento da imagem e um crop. Ninguém vai notar.
• Se houver menus com estado de inativo, ativo e hover, coloque todos os estados em um mesmo arquivo, posicionando um estado sobre o outro. Altere o posicionamento do fundo para cada estado.
• Cada arquivo CSS é um request diferente, não importando se ele está sendo chamado no HTML ou importado dentro do CSS (@import). Economize arquivos! Use novos arquivos CSS apenas se absolutamente necessário. Para melhorar a organização, faça blocos de definições divididos por mídia (@media) e por tipo (tags, classes, IDs). É como usar o conceito de CSS frameworks, mas com menos arquivos.

Usando atalhos

Para cores:

Antes:

border-color: #FF0099;

Depois:

border-color: #F09;

Para espessuras:

Antes:

border-width: 1px 1px 1px 1px;
margin: 10px 0px 10px 0px;

Depois:

border-width: 1px;
margin: 10px 0;

Para fundos, fontes e listas:

Antes:

font-weight: bold;
font-style: italic;
font-variant:small-caps;
font-size: 1em;
line-height: 1.4em;
font-family: Verdana, Arial, Helvetica,sans-serif;

Depois:

font: bold italic small-caps 1em/1em verdana, sans-serif;

Usando alternativas

Algumas propriedades possuem alternativas. Escolha sempre a com menos caracteres. Por exemplo, troque font-weight:bold por font-weight:800, background-position:left top por background-position:0 0 e assim por diante.

Pontuando corretamente

Não é necessário encerrar cada bloco de seletores com ponto-e-vírgula:

a{
    color:#F09;
    text-decoration:underline
}

Vamos começar tudo de novo…

Mesmo que você não seja fã de CSS frameworks, use pelo menos um conjunto de parâmetros CSS para limpar todos as definições de estilo nativas do navegador. Causa um estranhamento no início, mas é bem mais rápido de implementar. Além disso, evita várias definições para limpar estilos espalhados pelo site e hacks para tentar igualar as definições de um browser para outro. Veja sobre reset.css mais no site do Eric Meyer.

Robôs para seu prazer

Para a publicação de uma inteface, é interessante usar alguma ferramenta de otimização como o Icey – CSS Compressor, Clean CSS e o CSS Tweak. Teste o site nestes e em outras ferramentas pois os resultados variam de projeto para projeto.

Lembre-se sempre de fazer um back-up dos seus arquivos antes de utilizar uma destas ferramentas. E teste, teste tudo novamente depois de passar os arquivos .css por estes filtros.

Há ferramentas para condensar arquivos de CSS e de JavaScript.

Referências:

• CSS Optimization: Make Your Sites Load Faster for Free, no Blogging Pro;
• O artigo Best Practices for Speeding Up Your Web Site traz os parâmetros do YSlow para sites de grande porte;
• Efficient CSS with shorthand properties, no 456 Berea Street