Explique qual div você está fechando
Na maioria das vezes, quando estou vendo uma fonte do site, vejo, na parte inferior da página, uma lista quase interminável de tags de fechamento. Na verdade, muitos iniciantes acham que só têm que usar divs em vez de tabelas para produzir código de qualidade. Divs são limpadores do que tabelas, mas sem a organização adequada do código, pode ser tão (ou até às vezes mais) bagunçado como código baseado em tabela.
Usar o recuo é um bom começo. Mas uma dica que pode definitivamente fazer você economizar muito tempo é comentar cada tag div que você está fechando, como mostrado no exemplo abaixo:
<div id="header"> <div id="sub">... </div><!-- #sub.first.left --> </div><!-- #header -->
Use um reset CSS
A menos que você seja um iniciante ou se você estava de férias em uma ilha deserta nos últimos 6 anos, você já pode saber o quão útil um CSS redefini-lo. Como por padrão, os navegadores não aplicam o mesmo estilo padrão aos elementos HTML, uma redefinição CSS garantirá que todos os elementos não tenham um estilo específico para que você possa definir o seu próprio sem o risco de muitos problemas de renderização do navegador cruzado.
html, corpo, div, span, applet, objeto, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, sigla, endereço, grande, citar, código,
del, dfn, em, font, img, ins, kbd, q, s, samp,
pequeno, strike, forte, sub, sup, tt, var,
b, u, i, centro,
dl, dt, dd, ol, ul, li,
fieldset, forma, rótulo, lenda,
tabela, legenda, tbody, tfoot, thead, tr, th, td {
margem: 0;
preenchimento: 0;
fronteira: 0;
contorno: 0;
tamanho da fonte: 100%;
linha vertical: linha de base;
fundo: transparente;
}
corpo {
altura da linha: 1;
}
ol.ul {
estilo lista: nenhum;
}
blockquote,q {
citações: nenhuma;
}
cota de bloqueio:antes, blockquote:depois,
q:antes, q:depois {
conteúdo: '';
conteúdo: nenhum;
}
/* lembre-se de definir estilos de foco! */
:foco {
contorno: 0;
}
/* lembre-se de destacar inserções de alguma forma! */
ins {
text-decoração: nenhum;
}
del {
text-decoração: line-through;
}
/* as tabelas ainda precisam de 'cellspacing="0"' na marcação */
tabela {
colapso fronteiriço: colapso;
espaçamento fronteiriço: 0;
}
Fonte:http://meyerweb.com/eric/tools/css/reset/index.html
Não use @import
Os arquivos CSS podem ser incluídos usando a diretiva @import. Isso pode ser útil quando, por exemplo, você deseja incluir uma folha de estilo em outra. Outra prática comum é incluir arquivo CSS em documentos html usando o seguinte:
<style type="text/css>
@import url('a.css');
@import url('b.css');
</style>
Enquanto funciona, a diretiva @import é muito mais lenta do que a outra maneira de incluir folhas de estilo em um documento html:
<link rel='stylesheet' type='text/css' href='a.css'> <link rel='stylesheet' type='text/css' href='proxy.css'>
Não fará diferença em sites de baixo tráfego, mas se você tiver a chance de ter um site popular, não perca o tempo do seu visitante usando @import.
Fonte:http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
"Smush" suas imagens
Sendo um desenvolvedor, sempre achei que otimizar minhas imagens para a web não era fácil. Tentei o bom e velho comando "Save for web" do Photoshop, mas na maioria das vezes, acabei com imagens que eram muito grandes ou sem qualidade suficiente.
Como resultado, eu tinha o mau hábito de usar imagens não ooptimizadas em meus sites. Isso não é um problema quando você não precisa se preocupar com a largura de banda do seu site, mas depois da minha recente mudança no meu servidor privado virtual vps.net, tive que ter cuidado com o tamanho da imagem.
Neste momento, encontrei uma ferramenta muito legal chamada Smush It: Você digita sua url de imagem não otimizada, e Smush criará uma imagem perfeitamente otimizada para você. Você pode economizar até 70% do tamanho do arquivo, mantendo a qualidade original. Como exemplo, todas as imagens da minha lista de editores de código online foram "apagadas".
Não misture CSS com HTML
Como uma linguagem de marcação, o uso certo de HTML é organizar documentos definindo um cabeçalho, um rodapé, listas, cotas bloqueadas, etc. Há algum tempo, os desenvolvedores web front-end frequentemente usavam atributos HTML preteridos para estilizar um determinado elemento.
Hoje em dia, o atributo de estilo permite que os desenvolvedores insiem CSS diretamente em um documento html. Isso é muito útil para testes ou quando você está com pressa. Mas o atributo de estilo é a má prática, que vai completamente contra a filosofia CSS.
O exemplo a seguir ilustra o quão suja e difícil de ler uma simples linha de código pode se tornar, com o atributo de estilo:
<a href="http://www.catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">Gatos que codificam</a>
Não misture Javascript com HTML
Assim como misturar seu código html com css é má prática, você não deve usar nenhum Javascript em seus documentos html. A seguinte má prática ilustra um evento onclick:
<a id="cwc" href="http://www.catswhocode.com" onclick="alert('I love this site!');">Gatos que codificam</a>
O mesmo resultado pode ser alcançado usando Javascript desobstruído. Neste exemplo, estou usando a estrutura popular jQuery:
$(document).ready(função){
$('#cwc').clique(função){
alerta ('Eu amo este site');
});
});
Isso pode parecer um pouco mais difícil no início, especialmente para iniciantes; mas definitivamente não é, e ele vai manter o seu documento html limpo.
Use comentários condicionais
Você sabe disso, iE é uma droga, e alguns clientes são ainda mais ruins, exigindo que você crie páginas da web compatíveis com este navegador obsoleto. Para direcionar versões específicas do IE, você pode usar os hacks iE bem conhecidos, como mostrado abaixo:
altura: 200px; /* navegadores normais */ _height: 300px; /* IE6 */ .altura: 250px; /* IE7 */ *altura: 350px; /* All IEs */
Esses hacks são extremamente úteis às vezes, mas eles não são a melhor maneira de atingir uma versão específica do IE, e isso fará com que sua validação de CSS falhe.
Em vez disso, você deve usar o comentário condicional mostrado abaixo para atingir o IE6.
<link href="style.css" rel="stylesheet" type="text/css" /> <!--[if lte IE 6]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
Coloque o arquivo Javascript na parte inferior
Uma prática popular do final dos anos 90/início dos anos 2000 foi colocar arquivos Javascript dentro do<head>E</head>Tags. O problema é que seus arquivos javascript serão carregados primeiro e, consequentemente, seu conteúdo será carregado depois.
Ao colocar arquivos Javascript na parte inferior de seus documentos, você garantirá que os arquivos JS serão carregados somente quando o conteúdo tiver sido exibido corretamente.
... <script type='text/javascript' src='jquery.js?ver=1.3.2'></script>
Use HTML semanticamente
HTML não é uma linguagem de programação. É uma linguagem de marcação, usada para criar documentos estruturados denotando semântica estrutural para textos como títulos, parágrafos, listas e muito mais.
Se você começou a criar sites nos bons e velhos anos 90 ou no início do século, você sabe como a marcação era suja na época. Mas felizmente, evoluiu.
Entre outras coisas, é importante usar o elemento html semanticamente. Como exemplo, um menu de navegação deve ser sempre uma lista não rdenada:
<ul> <li><a href="#">Casa</a></li> <li><a href="#">Sobre</a></li> <li><a href="#">Contato</a></li> <li><a href="#">Blog</a></li> </ul>
Teste WHILE você constrói para evitar problemas entre navegadores
Um dos maiores erros que já cometi ao desenvolver html, CSS e javascript, foi não testar minhas páginas em vários navegadores enquanto eu as escrevia. Em vez disso, eu costumava escrever todo o meu código e apenas ver no Firefox para ver como ele foi renderizado.