Como Melhorar o CSS de um site?

Dê um Nome ao seu código

/* ----- Conteudo ----- */

div#conteudo { float: right: border: 1px solid #333 }

  

/* ----- tabelas ----- */

div#tabelas { padding: 100px; margin: 680px; float: left; width: 300px; height: 500px }

  

/* ----- Rodape ----- */

div#rodape










Facilite a leitura para os mecanismos, agrupando-os:




Muita das vezes os códigos css estarão esparramados ao longo da folha,

voce então terá a oportunidade de faze-los ficar juntinhos, quando se

trata da mesma sessão do site.

Metodo errado:

li#banana { background: url(banana.png); padding-left: 10px; margin-left: 10px }

li#menu-head { background: padding-left: 10px; margin-left: 10px }

li#footer { padding-left: 10px; margin-left: 10px }

li#melancia { background: url(melancia.gif); padding-left: 10px; margin-left: 10px }

li#melao { background: url(melao.gif); padding-left: 10px; margin-left: 10px }

li#ico-joias { background: url(joias.gif); padding-left: 10px; margin-left: 10px }

li#bebidas { background: url(bebidas.gif); padding-left: 10px; margin-left: 10px }







Note: Estão desordenados os códigos css cada um de uma sessão da página,
lá em cima no head, la em baixo no footer, atributos de meio de página... Esta forma está ERRADA




Você desorienta o carregamento e atrasa o Loading das informações estruturais dos elementos de estilo.

Modo Correto:

li#banana { background: url(banana.gif); padding-left: 10px; margin-left: 10px }

li#melancia { background: url(melancia.gif); padding-left: 10px; margin-left: 10px }

li#melao { background: url(melao.gif); padding-left: 10px; margin-left: 10px }







Sequencial 1 2 3, elementos da mesma sessão e local do site.




é preferencial a inserção de estilos começando de head ate footer,
assim a leitura de sua folha de estilo estará sequencial Senhoras e Senhores.