Já contamos sobre como o CSS tornou-se a ferramenta mais importante para o desenvolvimento de sites tableless, tirando do HTML a função de formatar conteúdo e deixando-o somente com a tarefa de descrever semanticamente um conteúdo. Contudo, ao descrever CSS, é possível que ele fique tão bagunçado que seja difícil mantê-lo, aperfeiçoá-lo e repará-lo, conforme haja necessidade.

A intenção deste post é oferecer dicas para escrever sua folha de estilos com maior simplicidade e elegância, a fim de melhorar sua compreensão, poupar linhas de código e tempo para mantê-lo.

1. Evite, dentro do possível, escrever CSS dentro do HTML

É sabido que existem casos em que, por causa do sistema responsável pela estrutura do site, às vezes pode ser necessário escrever alguma declaração CSS no cabeçalho da página (substituindo ou acompanhando um link para a folha de estilos num arquivo CSS separado) ou mesmo ao longo do corpo do documento, utilizando o atributo style dentro de uma tag (prática conhecida como “estilo inline”).

Ambas as práticas podem ser utilizadas, mas não são recomendadas porque fragmentam desnecessariamente a formatação de uma página, ao invés de manter tudo num só lugar.

2. Avalie a possibilidade de utilizar mais de uma folha de estilos

Fatos da vida: quanto maior um site, maior é a quantidade de código necessário para que ele funcione e comporte todo o conteúdo. Conforme isto acontece, geralmente dividimos uma página em alguns templates (como página inicial, página interna, resultados de busca, etc) para facilitar a tarefa.

Com um CSS, não precisa ser diferente. Antes que alguém reclame sobre contradição ao tópico anterior, eu explico: se um site for muito grande, não há problema em dividir o CSS também em pedaços relativos a cada tipo de página, desde que a divisão seja corretamente documentada e que haja pelo menos um arquivo CSS comum a todo o site.

Além do mais, isso é uma prática comum em sites que oferecem ao usuário a possibilidade de escolher um tema ou um conjunto de cores, sendo que cada conjunto é declarado num arquivo CSS diferente.

3. CSS Reset: a faca de dois gumes

A prática de “zerar” todos os parâmetros próprios do navegador para reduzir problemas de compatibilidade, conhecida como “CSS Reset”, é muito boa por entregar ao designer a possiblidade de ter toda a formatação do site sob controle. Como ela limpa configurações originais de tags, ela oferece melhores resultados de compatibilidade entre browsers diferentes.

Mas ela oferece um risco quando o sistema de publicação é exibido em conjunto com o site (e não numa área administrativa interna, como acontece no WordPress, por exemplo): o CSS Reset pode zerar todas as configurações do sistema publicador também, tornando-o inutilizável.

Uma possível solução para este problema é construir o site inteiro dentro de uma divisória (div), e zerar as propriedades de todas as tags contidas dentro dela. Embora seja uma solução mais trabalhosa, ela pode ser necessária.

4. Indentar, sempre; desistir, jamais!

Como tudo que envolve programação para mídia digital — HTML, linguagens de servidor e de cliente, etc —, você tem a liberdade de escrever tudo sem o mínimo de cuidado, ou pode indentar, a fim de manter algoritmos e demais textos organizados.

No entanto, o CSS não demanda uma indentação complexa, já que ela não possui níveis hierárquicos. A indentação, no entanto, é bastante recomendada para destacar os seletores de suas propriedades, facitando a organização do conteúdo. Um exemplo de declaração CSS bem escrita é mostrada a seguir.


#header ul.menu {

   width: 500px;

   height: 80px;

   position: relative;

   float: left;

   color: white;

   overflow: hidden;

}

O seletor é declarado no início, abrindo colchetes no fim da linha, e na linhas seguintes as propriedades recebem uma indentação simples, para facilitar a leitura.

5. Cada macaco no seu galho

Imagine que você está construindo um menu para seu site, todo com CSS. É natural que você queira manter unida toda a declaração necessária para que o menu funcione, destacando-a das demais declarações. Seria algo mais ou menos assim:


#header h1 {

   font-family: Verdana, sans-serif;

   font-size: 18px;

   color: #4EF;

}

#header ul.menu {

   width: 500px;

   height: 80px;

   float: left;

   color: white;

   overflow: hidden;

}

#header ul.menu li {height: 40px;

   line-height: 40px;

   padding: 20px;

   float: left;

}

#header ul.menu-secundario {

   width: 200px;

   height: 40px;

   float: right;

   color: white;

   overflow: hidden;

}

Quando você termina a declaração de um seletor, mas começará a declarar outro que é relacionado ao anterior, você pode mantê-los juntos, sem abrir uma linha vazia de diferença. Contudo, ao mudar de “contexto”, o ideal é manter seletores separados por uma linha vazia.

6. Se for direto, seja curto

Além da declaração multi-linhas, o CSS permite que você declare várias propriedades seguidamente em apenas uma linha. Isso é bom quando há algum seletor que não demanda muitas propriedades, como uma pseudo-classe, por exemplo.


#footer a {

   font-family: "Trebuchet MS", sans-serif;

   font-size: 12px;

   font-weight: bold;

   color: #FED;

}

#footer a:hover { text-decoration: none; color: #DCB; }

Manter uma declaração em uma linha é uma boa solução para até duas propriedades. Além disso, é aconselhável manter cada propriedade em linhas separadas.

7. CSS hexa-verba-nano-chromatic

Existem atualmente três formas de declarar cores no CSS — hexadecimal, hexadecimal reduzido e nominal —, e quando o CSS3 for finalmente regulamentado, serão quatro — mais o RGBa.

content a { color: #FEBC43; } /* hexadecimal completa */

content a:hover { color: #DB9; } /* hexadecimal resumida */

content a:active { color: orange; } /* declaração nominal */

content a { background: rgba(160, 64, 20, 0.7); } /* declaração RGBa, do CSS3 */

A declaração hexadecimal completa é a mais comum e a que proporciona a maior variedade de cores. É composta de seis números, em que cada dupla representa os valores de cada canal de cor, indo de 00 a FF. A hexadecimal resumida funciona da mesma maneira, mas utiliza apenas um número, de 0 a F, para cada canal de cor, e por isso oferece um escopo mais restrito de cores. A declaração nominal utiliza uma tabela pré-definida de cores associadas a nomes comuns em inglês, como white, black, blue, magenta, orange, green, entre outras. A tabela de cores é bem extensa, mas ainda é mais restrito.

O CSS3 prevê também o RGBa, que permite declarar os valores numéricos das cores em formato decimal, além do valor da opacidade da propriedade em questão. Apesar de tentador, ainda não é suportado em todos os browsers.

É importante que as declarações de cores em hexadecimal sejam sempre descritas em maiúsculas, para que se destaquem do restante do código, e os nomes das cores estejam em minúsculas.

8. Cuidado com a métrica (e com a falta dela)

Graças ao box model, podemos dimensionar facilmente nossas áreas de conteúdo. No entanto, é necessário tomar cuidado ao dimensionar elementos dentro do site.


#sidebar {

   width: 200px; /* nunca deixe uma propriedade dimensional sem unidades de medida */

   font-size: 1.1em; /* se escolher uma unidade no início, mantenha-a até o fim */

   padding: 0; /* não importa a unidade que você utilize: zero é sempre zero */

   margin: 10px 0 20px; /* algumas propriedades permitem declarações conjuntas de dimensões */

   float: left;

}

9. Separe o código por áreas

Por fim, é importante manter as coisas em seus devidos lugares. Não é conveniente, por exemplo, descrever a formatação de um rodapé no início de uma folha de estilos responsável por uma página inteira. É recomendado que as declarações sigam a mesma ordem com que são apresentados na página, podendo separar as áreas com comentários

/* -------- declarações gerais ---- */

[...]

/* -------- cabeçalho ---- */

[...]

/* -------- conteúdo ---- */

[...]

/* -------- rodapé ---- */

10. Cuidado com hacks e experimentos

Até o momento em que este artigo é descrito, o CSS3 ainda não foi regulamentado. Quem lá leu sobre o assunto deve ter visto algumas propriedades que são precedidas pelo distribuidor do browser, como -moz-border-radius, -webkit-transition, entre outras. No futuro, os nomes dos distribuidores deve sumir, e essas propriedades experimentais serão oficializadas.

Além disso, alguns problemas de incompatibilidade de browsers (hello, Internet Explorer!!) podem ser resolvidas com hacks que são vetados pela W3C, e o CSS que faz uso de tais artifícios não será validado. Para casos assim, o mais recomendado é construir uma folha de estilos específica para o browser problemático (cof, cof… IE… cof, cof…) e inserí-lo na página por meio de comentários condicionais.


<head>

<title>Teste</title>

<link href="style.css" rel="stylesheet" type="text/css">

<!--[if IE]><link href="ie-fix.css" rel="stylesheet" type="text/css"> <![endif]-->

</head>

Um aviso importante é que o Internet Explorer 9 não trabalha mais com estes comentários condicionais, mas como ele promete ser bem adequado às especificações de (X)HTML e CSS, não será motivo de preocupação.

11. Cuidado com muitos comentários

Isto não vale só para folha de estilos: qualquer código merece ser bem documentado, para que outra pessoa possa modificá-lo e repará-lo quando necessário. Contudo, isso não significa que todas as linhas precisem ser comentadas, o que faz o código ficar ainda mais bagunçado.

Especialmente no caso do CSS, as propriedades são auto-explicativas e o código não tem um nível de complexidade muito grande, por isso não vale a pena comentar tudo, apenas algum trecho trivial, que mereça uma atenção especial durante o aprendizado ou que será tratado por outra pessoa.


#header ul.menu li ul {

   height: 40px;

   line-height: 40px;

   padding: 20px;

   float: left;

   display: none;

}

#header ul.menu li:hover ul { display: block; } /* faz aparecer o sub-menu ao passar o mouse */

Enfim, estas são algumas recomendações para uma folha de estilos bem escrita. Se você tem mais alguma dica, fique à vontade para incluir nos comentários.