Estruturando seu código CSS

Geralmente não pensamos nas fundações de um edifício. No entanto, sem fundações sólidas um edifício não existiria. Embora
este Blog seja sobre técnicas avançadas de CSS, boa parte do que vamos fazer não seria possível (ou seria muito difícil)
sem um documento XHTML bem estruturado e válido para trabalhar.

Utilize marcação significativa

No início, a Web não era nada mais que uma série de documentos de pesquisa interligados que utilizavam HTML para adicionar
formatação e estrutura básicas. Mas, à medida que a World Wide Web ganhou mais popularidade, a HTML começou a ser utilizada
para propósitos de apresentação. Em vez de utilizar elementos de títulos para manchetes de páginas, as péssoas utilizavam uma
combinação de fonte e tags em negrito para criar o efeito visual que elas queriam. As tabelas foram adotadas como uma ferramenta
de layout em vez de uma maneira de exibir dados e as pessoas utilizavam um blockquote (comando HTML que define um bloco de
texto como uma citação) para adicionar espaço em branco em vez depara indicar citações. Rapidamente a Web perdeu seu significado
e tornou-se um emaranhado de tas de fonte e tags de tabela.

Veja este código:



A marcação para este anúncio utiliza tabelas para layout e uma fonte grande e negrito para o título. O código não tem estrutura
e é difícil de entender.

A HTML foi concebida como uma linguagem de marcação simples e compreensível. Mas, à medida que o aspecto visual das páginas
Web tornou-se cada vez mais importante, o código tornou-se quase ininteligível. Como tal, eram necessárias complicadas ferramentas
WYSIWYG para tratar essa imensidão de tags sem sentido. Infelizmente, em vez de tornar as coisas mais simples, essas ferramentas
acrescentaram suas próprias marcações complicadas à mistura. Na virada do milênio, a página Web usual era tão complicada que
era quase impossível editá-la manualmente sem o medo de estragar algo no código. Algo precisava ser feito.

Então surgiram a Cascading Style Sheets, ou folhas de estilos em cascata. Com a CSS, tornou-se possível controlar a aparência
externa da página e fazer uma separação entre o aspecto visual de um documento e seu conteúdo. Tags de aparência, como o tag font,
podiam ser separados e o layout podia ser controlado usando CSS em vez de tabelas. Mais uma vez, a marcação poderia ser simples
e as pessoas começaram a desenvolver novos interesses no código.

O significado começava lentamente a voltar aos documentos. Os estilos padrão do navegador poderiam ser sobrescritos, assim
tornou-se possível marcar qualquer outra coisa como um título sem que ele fosse grande e escuro. Listas podiam ser criadas sem
serem exibidas como uma série de itens precedidos por um marcador e blockquotes podiam ser utilizados sem a estilização associada.
Os desenvolvedores começaram a utilizar elementos XHTML em função do seu significado em ves de sua aparência.

Veja este código:



A marcação do anúncio está bem estruturada e fácil de entender.

A marcação significativa fornece vários benefícios importantes ao desenvolvedor. Páginas significativas são muito mais fáceis
de trabalhar que as visuais. Por exemplo, digamos que você precise alterar uma citação em uma página. Se a citação estiver
marcada corretamente, será fácil varrer o código até encontrar o primeiro elemento blockquote. Entretanto, se a citação for simplesmente
um outro tag de parágrafo, será mais difícil encontrá-la.

Assim como é fácil para os nós entender-mos, a marcação significativa, antes conhecida como marcação semântica, os outros programas
também se beneficiam. Sistemas de pesquisa por exemplo, podem reconhecer uma manchete porque ela está dentro de tags H1 e atribuem mais importância a ele. Os usuários com softwares leitores de tela podem contar com títulos como uma forma de navegação
de página suplementar.

Marcação significativa fornece uma maneira simples de selecionar os elementos que você deseja estilizar. Ela estrutura um documento
e cria uma base sobre a qual trabalhar. Você pode estilizar elementos diretamente sem precisar adicionar outros indentificadores e,
assim, evitar poluir desnecessariamente o código.

A XHTML possui uma rica variedade de elementos significativos, como:

- h1, h2, h3, h4 etc.
- ul, ol e dl
- strong e em
- blockquote e cite
- abbr, acronym e code
- fieldset, legend e label
- caption, thead, tbody e tfoot

Sempre usar elementos apropriados e significativos é o caminho mais fácil e certo no uso da CSS.

Espero que com este tópico as coisas fiquem mais claras para os próximos. Até lá!