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 indentar 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 indentado à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.

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ê.

Indentação

Mantenha seu código CSS indentado 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 indentação de acordo com seu nível hierárquico. Indentar 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.

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

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.

Como é desgastante ter que refazer partes do CSS – ou mesmo todo ele novamente – para torná-los iguais visualmente. Fora os hacks, conditional comments e todas as outras gambiarras existentes. Para quem está iniciando, deparar-se com um site que é renderizado de uma maneira num browser e de outra em outro browser pode ser tão desanimador a ponto de levá-lo aos velhos métodos de desenvolvimento.

Falamos em novas especicações, como a do CSS3 mas, é essa a prioridade atual? Quem sabe não seria melhor se nos preocupássemos com efetivar o que já existe, ou seja, fazer com que o CSS2.1 funcione corretamente em todos os browsers?

O problema começa na própria W3C. Por lá as coisas são muito – mas muito mesmo – lentas. Para você ter uma idéia, o rascunho da especificação CSS3 data de 23 de maio de, vejam, 2001. Tempo pra caramba, não acham? Quanta coisa já mudou de lá pra cá e continuamos empacados.

OK, existem problemas técnicos envolvidos que não podem ser evitados, como incompatibilidades, bugs nos browsers, etc. Mas o centro de tanta demora parece ser a “politicagem” existente na W3C: discussões com argumentos antigos, prioridades concedidas ? s áreas erradas, empresas envolvidas visando apenas os seus interesses.

Seria melhor se as ferramentas planejadas para a nova especificação do CSS fossem mais simples, e atendessem realmente as necessidades atuais dos desenvolvedores – e não as de 5 ou 10 anos. Talvez seja a hora ideal para um CSS2.2, sem tantos novos recursos, mas com aqueles que nós realmente precisamos; deixando um pouco de lado aqueles que precisaremos daqui a muito tempo. Temos que esquecer de projetos para o CSS do futuro, principalmente quando o atual é mal interpretado e mal renderizado (por alguns “browsers”).

Existem inúmeras outras diferenças. Você as percebe quando está começando a fazer seu CSS e testa a página no IE e no Firefox ao mesmo tempo. Quando você ainda não aplicou nenhum estilo, os próprios estilos dos browsers mudam um pouco. Para uns os cabeçalhos tem um padding maior, um alinhamento vertical diferente, e assim por diante.

Para garantir o máximo de fidelidade em todos os browsers, resetar os estilos antes de começar a fazer a camada de formatação é uma boa pedida. Evita, muitas vezes, que seja necessária a utilização de conditional comments ou hacks.

A solução, então, é simples: antes de começar a desenvolver o CSS propriamente dito, basta zerar os principais seletores do CSS, aplicando-os a todos os elementos, como no exemplo:


* {
margin: 0;
padding: 0;
border: 0;
}

Além disso, pode ser feito o reset de seletores para elementos específicos:


h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}

O que pode ser feito para minimizar as necessidades de utilizar métodos alternativos – e não tão “politicamente corretos” – é sempre bem vindo. Você pode definir posicionamentos, tamanhos, fontes, etc. Se você não tem esse hábito de zerar os seletores, crie-o. Ajuda bastante.

Veja também

• Reset reasoning – Eric Meyer
• Coisas úteis que não funcionam no IE #3 – Seletor com asterísco – Tableless.com.br

Existem espalhadas pela web algumas cartilhas, ou cheat sheets, que facilitam bastante o trabalho de quem está começando. São grandes tabelas que contém todos os elementos do HTML, CSS, JavaScript e Microformatos, e que quebram um galho enorme algumas vezes quando um elemento ou outro escapa da mente.

Mas, para não dar uma de parasita e consumir a banda dos outros, fiz o upload dos arquivos (que estão em PDF) no meu servidor.

Faça o download

Seguem os links:

• HTML Cheat Sheet, de Liquid City
• CSS Cheat Sheet, de Liquid City
• JavaScript Cheat Sheet, de I Love Jack Daniel’s
• Microformats Cheat Sheet, de Microformats.org