Rafael Marin

Caso tenha perdido, leia Dicas para melhorar seu CSS, que contém a introdução e dicas básicas de otimização das folhas de estilo em cascata.

Você sempre pode ir além, é claro. Existem mais maneiras, tão simples quanto as outras, de escrever código CSS ainda mais estruturado. As dicas que seguem são especialmente dirigidas àqueles que mantêm grandes quantidades de código, aos que atualizam seus CSS’s com freqüência, ou àqueles que trabalham em equipe - onde todos podem fazer eventuais alterações.

Grandes sites, que conseqüentemente possuem folhas de estilo maiores, exigem certa modularidade em todo o processo de desenvolvimento. Do Javascript ao PHP, do HTML ao banco de dados, passando (é claro) pelo CSS, o código inteiro carece de constante atualização. Como otimizar, então, nossos estilos para que nossa vida seja mais fácil?

Nada como código comentado

Use e abuse dos comentários para descrever seletores complexos, e para organizar todo seu CSS de maneira geral.

Zerar os estilos

Cada browser faz sutis modificações na maneira com que os estilos são renderizados. Para evitar a dor de cabeça posterior, algo interessante de se fazer ainda no início de desenvolvimento é o reset de estilos, que já falei sobre anteriormente.

Crie estilos padrão para elementos comuns

Seus elementos a, cabeçalhos h1, h2, h3, h4, h5, h6, parágrafos p, listas não-ordenadas ul e ordenadas ol - entre outros - geralmente possuem exatamente a mesma formatação em todo o site. Por isso, você pode aplicar certas propriedades diretamente ao elemento. Por exemplo, se seus links são sempre verdes, não coloque um color: green; em cada lugar que os links aparecem, como em #sidebar a, #post a, #header a, #footer a, .caixa a { color: green; }.

Prefira definir um estilo padrão, como a { color:green }, e então faça modificações apenas onde for necessário. Isso evita que seu código fique muito ambíguo, o que torna difícil a manutenção, pois se você determina a mesma cor para os links dentro de diferentes elementos, a cada modificação serão vários lugares a serem alterados.

Com os cabeçalhos, de h1 a h6, você pode e deve definir os tamanhos, pois a medida padrão para os cabeçalhos pode mudar um pouco de acordo com o browser.

Crie um índice com o conteúdo do arquivo

Pode ser uma boa, caso você não tenha o costume de identar o código. Defina uma TOC no início do documento, utilizando texto comentado, e então insira as marcações sinalizando o início de uma nova seção ao longo do código. Se isso ajuda ou não, depende de cada um. Só um código bem identado às vezes já vale mais do que esta estruturação com índice.

Separe seu código CSS em arquivos diferentes

Se você optar, pode separar cada pedaço do seu CSS em outros arquivos, e então chamá-los em um global. Isso é ótimo na manutenção, já que você sempre saberá exatamente onde procurar cada trecho de código, e o encontrará mais fácil pois cada arquivo não será tão extenso.

Importante: Leve sempre em consideração a performance, a velocidade de carregamento. Quanto mais arquivos forem chamados, mais requisições HTTP serão necessárias e mais tempo levará para o carregamento completo. Use esta dica com moderação.

Otimize seu CSS automaticamente com PHP

Chegamos na dica interessante do dia. Você provavelmente, em busca de otimização e melhora de performance, deve ter a sua própria maneira de otimizar o CSS antes de enviá-lo ao site. Existem inúmeros sites, como o CSS Cleaner, que otimiza o código para você, só que a cada alteração é necessário passar todo o código pelo otimizador novamente. Ou então, alguns preferem escrever todas as propriedades na mesma linha, etc, etc. Queremos uma boa manutenção, mas não podemos abrir mão da performance.

Trouxe um macete bem legal, mas é só para quem usa PHP. Adicione ao arquivo .htaccess da pasta dos seus arquivos CSS o seguinte código:


<Files otimizar.css>

SetHandler application/x-httpd-php

</Files>

Nesta mesma pasta, crie um arquivo chamado otimizar.css, e inclua nele o seguinte código.

<?php

header('Content-type: text/css');

ob_start("comprimir");

function comprimir($buffer){
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!’, ”, $buffer);

$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);

return $buffer;

}

include($_GET['file'].”.css”);

ob_end_flush();

?>

A partir de então, passe a chamar seus arquivos CSS pelo endereço otimizar.css?file=nome_do_css. A alteração no arquivo .htaccess tornará possível a execução de scripts PHP no arquivo otimizar.css, e o arquivo otimizar.css removerá espaços, comentários e quebras de linha no seu arquivo, retornando um CSS compactado do jeito que você gosta. Este código não é de minha autoria, mas como não lembro mais de onde tirei, não posso dar os devidos créditos.

Espero que tenham gostado, pessoal. Deste e do primeiro artigo sobre Otimização de CSS.

Este artigo foi publicado em 10 de May de 2008 às 5:16 pm em CSS.