CSS e semântica: dando (bons) nomes aos bois

No tempo da Internet a Vapor, ao se escrever cada elemento HTML era preciso especificar como ele seria formatado. A tag mais usada era a <font>. Quer colocar um título grande e vermelho? Fácil:

<font size=+2 color=red>Meu Título</font>

O design de seu sítio virtual se espalhava por de todas as páginas. Trocou de idéia? Quer agora que seu título seja verde? Beleza, agora terá que editar todas as páginas de seu sítio e fazer color=green. Não só vai dar um trabalhão, como você vai esquecer-se de mudar em alguns lugares. Seu design ficará inconsistente: umas páginas de um jeito, outras de outro.

O Cascading Style Sheets (Folhas de Estilo em Cascata) foi criado exatamente para resolver este problema. O CSS permite que o estilo de formatação de um elemento seja definido em uma página separada. Todas as páginas de um sítio passam a ter seus estilos definidos em um único lugar.

Se você quiser mudar o design, um único arquivo precisará ser modificado. As páginas ficam menores e carregam mais rápido, pois não é preciso enchê-las de informações para formatação. O estilo é carregado uma única vez e fica cacheado pelo browser.

Muita gente acha que o CSS existe para que se tenha novas opções de formatação. Não é esta a sua principal vantagem.

Com o CSS é possível dizer: todos meus elementos <H1> são formatados deste jeito, todos meus campos <INPUT> são daquele. E o grande poder do CSS vem com dois novos atributos para os elementos HTML, o class e o id. Uma classe ou id representa um conjunto de formatações. Todo elemento que tiver aquela classe ou id terá estas formatações.

As diferenças entre os dois é que todo elemento pode ter várias classes e apenas um id, e que não podem existir dois elementos com o mesmo id numa página.

Para se ter boas definições de estilo, uma das coisas mais importantes é dar bons nomes à suas classes. Pode até parecer bobagem, mas na prática, o nome que você der definirá que estilos sua classe representará.

Um exemplo de um estilo com nome ruim seria

textoGrandeVermelho {color: red; font-size: 3em;}

Fazendo isto, apesar de estar usando CSS, você estará programando como quando não existia. Caso resolva mudar o design de suas páginas para ter uma fonte verde, ou ficará com uma definição assim:

textoGrandeVermelho {color: green; font-size: 3em;}

ou terá que, como nos velhos tempos, editar todas as páginas de seu site. Não é raro preferirem a dissonância cognitiva.

Bons nomes são semânticos, isto é, devem definir alguma coisa. Você deve definir um nome que represente um objeto de seu design, ou uma qualidade dele. Eis um bom nome:

titulo {color: red; font-size: 3em;}

Assim você pode mudar os estilos de todos seus títulos sem precisar editar outras páginas, nem correr o risco de deixar seu sítio inconsistente. Ao ler o arquivo CSS, fica muito mais fácil identificar o que você precisa mudar se quiser que seu título apareça de maneira diferente. Se você quiser aproveitar suas páginas para outro cliente, bastará editar o arquivo CSS para ter um novo design.

Exemplos de bons nomes seriam: .titulo, .cabecalho, .rodape, .erro, .obrigatorio, .aviso, .filtro, .relatorio. Como cada elemento HTML pode ter mais uma classe, você pode combiná-las para ter definições como:

<H1 class="titulo erro">Título de página de erro</H1> 

<div class="aviso erro">Aviso de preenchimento de form> 

<input class="filtro obrigatorio" value="Filtro de preenchimento obrigatório" />

Nomes ruins seriam: .centralizado, .padding-esquerda, .width-td-full. E por que estes nomes são ruins? É porque se você quiser modificar seu site no futuro, será caro e trabalhoso. Se suas páginas tiverem títulos assim:

<H1 class="textoGrandeVermelho centralizado">Meu Titulo</H1>

E você não quiser mais que sejam centralizados, continuará tendo que editar todas as páginas. E será difícil achar no CSS quais são os estilos aplicados apenas a seus títulos. Eles provavelmente se aplicarão também a elementos que nada têm a ver.

Pensar um pouco para ter bons nomes para seus estilos CSS não é frescura. É apenas se preocupar com o futuro, com o tempo que você gastará com a manutenção de seu sítio. Não fazê-lo, é se prender ao passado. É programar como se ainda estivéssemos em 1995.