Estruturação e Organização do CSS (parte 1)

Introdução

Desde as primeiras páginas web até os dias de hoje, muitas coisas mudaram em relação à estruturação dos estilos aplicados. Por algum momento, páginas utilizavam estilos embutidos no HTML. Aos poucos, isso foi mudando e os estilos foram separados. Atualmente, é altamente recomendado o uso de folhas de estilos externas para possibilitar manutenções em estilos sem afetar a estrutura do documento. Além disso, a transferência de dados entre cliente e servidor fica reduzida (já que as folhas de estilos podem ser cacheadas), e também melhora a legibilidade da estrutura do documento.

Nos próximos posts vou citar algumas dicas sobre como estruturar seu CSS para permitir mudanças futuras sem grandes impactos e, na medida do possível, justificar as abordagens.

Utilização de Seletores Consistêntes

Talvez a principal dica para montar folhas de estilos consistentes é a utilização correta dos seletores. Para quem não sabe, folhas de estilos são compostas basicamente por seletores e a definição das propriedades. Os seletores são as regras para capturar os elementos desejados do documento (por exemplo "div#container" para capturar o elemento "div" com id "container"), e as definições de propriedades servem para especificar valores dos diferentes estilos permitidos no CSS (por exemplo "font-family: Arial;").

Muitas pessoas acham que isso é uma tarefa fácil, mas veremos que não é. Antes de mais nada, é preciso saber quando e como utilizar cada tipo de seletor.

---

Os seletores de tags devem ser usados para especificar estilos gerais para todos elementos de determinado tipo do site. Por exemplo: "os links do site serão verdes". Naturalmente que podem existir exceções, criadas com seletores com maior especificidade. Veja o exemplo:

a {
    color: #004400;
}

---

Os seletores de classes (utilizando o ponto-final) devem ser usados para especificar estilos para um conjunto de elementos que possuem a classe. Em geral, não se deve dar nome de classe como "link_vermelho" ou "borda_direita", pois no futuro, podemos querer mudar a cor ou posição do elemento e o nome da classe não ficará consistente com seu valor. Além disso, esta prática polui muito o documento, que fica parecendo que tem especificações de estilos inline, mas com utilização de classes. Alguns nomes mais válidos para classes seriam algo do tipo: "destaque", "aviso", "cabecalho", "menu", "usuario", etc.

Com relação à classes, ainda podemos dizer que podemos explorar o grau de especificidade e especificar regras para classes, depois regras para classes associadas a tags. Por exemplo:

/* Todos erros serao escritos em vermelho */
.erro {
    color: #440000;
}

/* Lista de erros terao borda vermelha */
ul.erro,
ol.erro {
    border: 1px solid #440000;
}

/* Quadros de erros terao fundo vermelho */
div.erro {
    background-color: #FFCCCC;
}

Note que a especificação da classe deve ser geral o bastante para ser sempre aplicada, independente do tipo de elemento.

Além disso, é preciso lembrar que é possível aplicar mais de uma classe a um único elemento, basta separá-las por espaços. Por exemplo:

<div class="menu principal" >
...
</div>

E no CSS podemos ter regras para ".menu" (estilos de todos elementos de classe "menu"), para ".principal" (estilos de todos elementos de classe "principal") e/ou para ".menu.principal" (elementos que possuem classe "menu" e também a classe "principal").

---

Os seletores de ID (utilizando a cerquilha "#") devem ser usados para especificar estilos para um elemento do documento ou para aumentar a especificidade de um outro seletor (de filho, por exemplo). Em geral, é importante dar ID a um elemento de forma consistênte, e que represente bem o elemento. Podemos, por exemplo, querer aplicar estilos para todos os links que estão dentro do elemento com ID "cabecalho", com o seletor:

#cabecalho a {
    ...
}

---

É muito importante encapsular os estilos para que eles não sejam aplicados a elementos indesejados.

Por hoje é isso. Nos próximos posts virão mais dicas de estruturação de CSS. Até a próxima.