Boas práticas de escrita e organização de CSS e HTML

[Nuno]

Quando antigamente se faziam sites em tabelas, por vezes o código ficava demasiado grande, de difícil compreensão e manutenção, com o aparecimento do CSS as coisas ficaram bem mais simples. No entanto é comum ver ficheiros CSS com milhares de linhas de código, sendo que grande parte dessas linhas são desnecessárias e claro se for um site que tenha muito tráfego, cada carácter a mais é um byte que está a ser carregado desnecessariamente a cada visita.

Ultimamente tenho escrito o HTML e CSS da seguinte maneira:

HTML

Código: [Seleccione]

<div id="noticias">
     <h1>Titulo Notícia</h1>
     <p>Resumo da notícia</p>
     <h1>Titulo Notícia</h1>
     <p>Resumo da notícia</p>
     <h1>Titulo Notícia</h1>
     <p>Resumo da notícia</p>
</div>
CSS

Código: [Seleccione]

#noticias{width:400px;height:400px}
#noticias h1{margin:15px 0 15px 0}
#noticias p{margin:0 0 15px 0;padding:0 0 15px 0;border-bottom:1px dotted #CCC}
Neste exemplo com apenas 3 linhas conseguimos definir o estilo de todos os h1 e p dentro da div noticias, seguindo esta lógica o uso de classes no CSS será bem reduzido, por sua vez o html ficará também mais limpo e mais fácil de manter.

[Lourenço Andrade]

A isso se chama ZEN CODING Dá muito jeito, também existe o compressor online : http://www.csscompressor.com/  antes de fazerem isso guardem o css original para se orientarem melhor.

[Nuno]

A isso se chama ZEN CODING Dá muito jeito, também existe o compressor online : http://www.csscompressor.com/  antes de fazerem isso guardem o css original para se orientarem melhor.

Organizando o código dessa forma não é necessário comprimi-lo mais pois ele vai ficar bem curto e a compressão apenas conseguirá reduzir um numero reduzido de bytes.