Padronização no (X)HTML

Sempre que começava a escrever um (X)HTML, me perguntava se aquele nome que dei a uma determinada div estava correto, ou se aquele nome de classe realmente representa o seu propósito. Pois bem, encontrei dois artigos que me ajudaram a padronizar meus documentos.

Um deles propõe uma estrutura bem interessante e que é realmente considero correta.

Vamos supor que você tenha uma div que está no topo do site e você a chamou de header, e todo seu CSS foi criado usando este id.

Talvez no momento da concepção do projeto o cliente realmente gostaria de um topo legal no site, mas como sabemos, as coisas mudam muito rápido, e num determinado dia seu cliente te liga e diz que não quer mais aquele topo lá em cima, e sim na lateral, o site não tem mais topo. Daí você muda o seu CSS e aquele topo vai para a lateral. Pronto !!! Ótimo !!!

Nada disso. O site não tem mais topo, então porque manter esse id lá? Se você realmente está querendo fazer uma Web bem feita, você não vai gostar de ver uma barra lateral, com o id header. Então por que na hora de você criar seus documentos, você não usa isso:
======================================================
#branding
Used for a header or banner to brand the site.

#branding-logo
Used for a site logo

#branding-tagline
Used for a strapline or tagline to define the site’s purpose

======================================================

Legal né !!! Isso daí eu ví no primeiro artigo. Agora no segundo artigo, achei legal a criação dos arquivos CSS.

Sempre criava um único arquivo com todas minhas declarações lá dentro. Por mais que eu seja organizado, sempre tinha uma coisa desorganizada:-), um id no lugar errado, uma classe fora do lugar. Por que não criar arquivos separados? Criar um arquivo css para os forms e outro para o menu. Isso vai deixar o código mais organizado e mais fácil de manter. Você não acha?:-)

Mas não vamos nos esquecer que isso daí vale para organizar o conteúdo da página, e as seções de notícias e eventos por exemplo, devem ter id’s ou classes que realmente a representam, afinal, temos que manter a semântica em nossos documentos.

Até…

1 comment so far

  1. Alexandre fevereiro 9, 2008 19:37

    Concordo com esse tipo de padronização, é algo que enriquece mais ainda a prática dos padrões e deixa tudo mais organizado.

    Se combinarmos a técnica de “módulos” de CSS com a técnica de “módulos” de HTML padronizados, podemos ter um salto muito grande na velocidade do desenvolvimento :)

Leave a comment

Please be polite and on topic. Your e-mail will never be published.