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.

Você provavelmente é bem organizado e toma conta direitinho do seu código PHP, Ruby, Python, ASP(?). Arquivos de classes organizados em pastas, todos com nomenclatura extremamente lógica. Seu HTML é impecavelmente semântico, e seu Javascript brilha, de tão bem estruturado. Agora, como anda a saúde das suas folhas de estilo?

CSS é, na maioria dos casos, a ovelha negra das linguagens no que se refere à manutenção. Já aconteceu com você de ter que mudar algum detalhe nos estilos de um site meses depois de ele ter sido concluído e custar um pouco até achar os seletores e propriedades corretas? Ou então, de criar seletores ambíguos, apenas com nomes de classe diferentes, e quando você precisa fazer alterações precisa mexer em mais de um lugar? Você ultimamente tem se perdido em centenas (milhares?) de linhas de código CSS?

Faça um esforço, e traga a organização que você já possui com seus scripts para a sua folha de estilo em cascata. Não é dificíl, pois as orientações você provavelmente já conhece e aplica, quase naturalmente. São algumas das sugestões que eu vi por aí e outras que eu mesmo sugiro a você.

Identação

Mantenha seu código CSS identado de acordo com a hierarquia que os seletores representam. No exemplo acima, #topo ul li pertence à #topo ul, e este pertence à #topo - assim como #topo img também pertence à #topo. Repare então que cada bloco de código recebeu uma identação de acordo com seu nível hierárquico. Identar seu CSS é importante justamente para visualizar facilmente a estrutura do seu site, sem necessariamente ter que ver o HTML todo novamente.

Ordem alfabética nas propriedades

Alguns de vocês podem julgar esta dica um tanto inútil. Na hora de escrever o código pela primeira vez, colocar as propriedades em ordem alfabética pode ser um pouco chato, cansativo. Mas se você reparar, na hora de fazer manutenção, você quase sempre fica procurando as propriedades no meio da confusão de caracteres. Para mim faz bastante diferença colocá-las nesta ordem, já deixa o código pronto para o futuro.

Agrupamento das propriedades

Os seletores #certo e #errado já dizem tudo. Você pode e deve resumir, por razões óbvias, a declaração das propriedades. Acredite, os dois blocos de código fazem exatamente a mesma coisa.

Na continuação desta série, veremos dicas avançadas para otimizar e estruturar seu CSS. Lembre-se sempre que todo esforço é sempre recompensado, e você é quem ganha quando precisar fazer manutenção e encontrar um código estruturado e intuitivo.

O Emanuel Felipe escreveu hoje sobre o Email Standards Project (Projeto de padrões de e-mail), que depois do WaSP, vem com o objetivo de estender o suporte a padrões Web também aos clientes de e-mail. Há os que gostam mesmo é de TXT - e eu particularmente gosto muito - mas o conceito de hipertexto no e-mail é bem aceito pela grande maioria.

Mas para quem trabalha com web e, em alguns casos, com produção de mailings e newsletters, criar webmails HTML é algo muito, mas muito complicado. O suporte de HTML e CSS dos programas é geralmente fraco, e varia muito de um aplicativo para outro.

O intuito do Email Standards Projects é fazer com que essa abordagem de padronização atinja também aos fabricantes de clientes de e-mail, como a Mozilla, a Apple, AOL, e mesmo os web-based, como o GMail, Yahoo! Mail e o Windows Live Mail.

Todo o esforço é válido, mas como o Emanuel, não estou tão confiante assim. É complicada essa história de acordos entre software vendors. Tudo depende, a coisa é bem burocrática. Mas não desistiremos, certo? Um dia todos usarão o Firefox e Thunderbird (que se saiu bem no teste do Email Standards Project). =P

Em sites cuja administração é feita pelo cliente, fica difícil controlar (evitar) o aparecimento de marcação inválida. Eu que estou trabalhando num CMS feito em padrões Web que o diga. Mesmo por que o cliente sequer sabe (na maioria das vezes) que um site é feito de código, e que supostamente este deve estar correto. Mas quem desenvolve, e sabe como é sofrido criar um site 100% compliant, pode utilizar um recurso que está sendo discutido no 456 Berea Street e no blog do Eric Meyer: o diagnóstico de erros de marcação através de folhas de estilo.

Isso quer dizer que você (ou seu cliente) pode facilmente identificar quando alguma tag está vazia, quando uma imagem não possui atributo alt, e por aí vai. As regras são simples, como no exemplo que segue:


font, center, div[align], p[align], table[align], font[color] {
color : #cd0000;
font-weight : bold;
background : #eecc11 url(images/warning.gif) repeat 0 0;
margin : 10px;
padding : 10px;
border : 2px dashed #cd0000;
font-size : 2em;
}


Os estilos acima colocariam as tags font, center, div com atributo align, p com atributo align, table com atributo align e font com atributo color em negrito, com cor e borda vermelha ao redor, indicando que há alguma marcação imprópria ou incorreta.

Algo mais inteligente é colocar essa marcação junto com a do editor WYSIWYG, ou junto ao site mas apenas para o cliente. Claro que isso não é a solução ideal, como o Roger do 456BereaSt sugere, mas já é um bom hack que ajuda e faz o seu trabalho.