Estudo do layout gera CSS enxuto e bem feito

Muitas são as formas de começar o desenvolvimento do CSS de um site. Alguns vão fazendo junto com o (X)HTML e outros só depois dele pronto. Este artigo é um complemento à essas abordagens. Aqui você vai entender que é possível adiantar boa parte do CSS antes mesmo do HTML estar pronto.

Com os layouts em mãos você deve identificar tudo o que há de igual. Não tenha medo de perder muito tempo nesta parte, porque perdendo muito tempo aqui você economizará codificando. Existe sempre uma box com títulos na mesma fonte, com mesmo bullet? Os títulos das páginas são iguais? Qual é a fonte predominante do site? Bons designers pensam em layouts estruturados e cabe a você identificar esta estrutura, sendo ideal contar com a colaboração do próprio designer.

Os métodos e os passos podem variar, mas um caminho geral é o seguinte:

1. Identificar o que é padrão ou pelo menos mais usado no site todo. Fonte predominante (font-family, font-size, color, etc.) podem ser atribuídos já ao body, poupando o trabalho de declarar tudo novamente pra cada elemento filho. É hora de averiguar se um elemento, por exemplo, a maioria dos links do site, também segue um padrão . Especificidades são facilmente sobrescritas, portanto pode ficar tranquilo.
2. Identificar as áreas do site. Se, por exemplo, o site tem um cabeçalho, uma lateral esquerda e uma região de conteúdo faça o mesmo exercício do passo anterior pra cada uma delas.
3. Elementos mais isolados. Se existe um certo tipo de box usado em várias áreas diferentes, mas que sempre segue um mesmo padrão é hora de identificá-lo. Veja também cada elemento da box, como título, listas, parágrafos, formulários, etc.
4. Desempate. Se um elemento é usado de uma forma em duas das três áreas do site esse é o padrão. A forma como ele é usado na terceira área é exceção e, portanto, deve ser declarada separadamente.
5. Igualdades. Se elemenos diferentes usam o mesmo estilo use vírgulas e declare os formatos uma vez só. Use declarações separadas só para as diferenças.

No primeiro momento é mais proveitoso nem declarar os atributos. Vá colocando no css apenas as chamadas. Exemplo:body {}
a {}
a:hover {}
div#header {}
div#header a {}
div#sidebar-left {}
div#sidebar-left a {}
div#sidebar-left p {}
div#sidebar-left form {}
div.box {}
div.box h2 {}
div.box p {}


Repare que neste momento você já decidiu alguns ids e classes, de acordo com o levantamento feito anteriormente. Na hora de montar o (x)html é só usar os ids e classes certas nos lugares pré-estabelecidos.

Fazendo o css desta forma, do mais abrangente ao mais específico (enfim, do jeito certo), você ganha em manutenção, em velocidade de codificação e em tamanho de arquivo.