Neste POST, pretendo mostrar como deixar seu código mais legível, mais organizado e de fácil manutenção e até mesmo mais fácil durante o desenvolvimento.

São pequenas coisas que podem fazer com que no futuro não percamos tempo demais tentando “decifrar” o código para prestar a manutenção ou até mesmo ter que refaze-lo (casos extremos).

Começarei com o CSS:

O que fazer:

• Utilize algum CSS Reset, fica mais fácil deixar o visual parecido em todos os navegadores, evitando muitas dores de cabeça.
• Coloque as regras mais importantes em cima. Ex.: position, float, width, height, clear e depois paddings, margins, fontes, cores.
• Agrupe as regras parecidas. Ex.: margin com padding, width com height, font com text-decoration e etc..
• Idente e comente seu código.
• Crie um arquivo common que será chamado na maioria ou em todas as suas páginas.
• Utilize regras para ID somente quando o elemento terá um estilo diferente de outros. Caso contrário utilize classe, para poder reaproveitar se código.
• Coloque mais ou menos na ordem que os elementos irão aparecer na página, pois fica mais fácil a localização dentro do arquivo CSS.
• Coloque a pseudo-classe hover no A, pois no LI o Internet Explorer não entende.

O que não fazer:

• Usar position absolute e relative para construir o seu layout. Utilize float e clear para fazer isso. Lógico em alguns lugares se usa isso. Ex.: menu drop down, div de propaganda e entre outros.
• Utilizar HACKS para o IE, na hora de validar pode se tornar um saco o que antes estava muito fácil, pois normalmente você vai precisar refazer seu CSS. Para o IE coloque seu arquivo CSS dentro de comentários condicionais.
• Evite CSS inline. Às vezes procurar por um CSS dentro do (x)HTML faz com que percamos um tempo que não temos.
• Não crie classes como nomes de cores, procure por um nome genérico. Já pensou se temos que mudar a cor que antes era amarelo para vermelho? No mínimo ficará esquisito a classe amarelo com a cor vermelha.

HTML:

O que fazer:

• Se você tem várias DIVS iguais, não jogue elas no meio do código. Defina um container para elas. Além de facilitar na modificação do seu layout futuramente fica mais fácil dar appends e prepends com javascript.
• Se você precisa dividir coisas umas de um lado e outras de outro dentro de uma div, crie um container pra cada lado e coloque cada um flutuando para um lado, ao invés de aplicar isso no elemento.
• Procure identar seu HTML, fica mais fácil visualizar onde as tags se abrem e se fecham.
• Nos names dos elementos se eles estiverem dentro de um form, utilize um array. Fica mais fácil transferir dados do POST para outros lugares desse jeito. Ex.: name=”usuario[Dados][nome]” e “usuario[Endereco][logradouro]“. Assim facilmente podemos passar os dados do usuario pra uma variável e seu endereço para outra sem utilizar uma porrada de linhas.

O que não fazer:

• Evite declarar javascript in-line. Isso não deve ser definitivamente utilizado!
• Não coloque dois elementos com o mesmo ID, parece que isso nem precisa se falar, mas acredite, eu já vi isso.

PHP:

O que fazer:

• Ao declarar classes com “ucwords” (hehehe), ou seja UpperCamelCase. Ex.: class MinhaClasseLegal extends MinhaClasse{}
• Ao declarar funcoes utilize o padrão lowerCamelCase. E dê um nome que corresponda ao que a função executa. Ex.: calculaPrecoDoProduto().
• Ao declarar variáveis utilize nomes que demonstrem o dado que a variável guarda. Ex.: minha variável guarda o preço de um produto. Depedendo do contexto utilize: $preco ou $precoDoProduto
• Para constantes utilize a caixa alta. Ex.: PATH_TO_SOMETHING.
• Quando for utilizar desvios condicionais utilize “{” e “}” mesmo o IF só tenha uma linha. Pois se precisar adicionar novas linhas irá perder menos tempo no futuro.
• Utilize isset() e não @.  Se um dia der um erro, vai ficar mais dificil descobrir o porque. Fora que @ é na minha concepção gambiarra de preguiçoso!
• Usar tags completas. Ex.: <?php ou <?php echo. (sendo sincero, muitas vezes uso short open, principalmente em views)

O que não fazer:

• Utilizar IF’s em apenas uma linha. Ex. if(algumacoisa) echo “meu if esta feio”;
• Nomear variáveis do tipo $c, $a, $j
• Criar funções com nome: gidp(). Traduzindo: getIdDoProduto()
• Evite utilizar @ para não exibir erros! Isso é muito feio, e ninguém vai morrer por perder 10 segundos fazendo isset()

Por enquanto é só, mais tarde eu adiciono mais algumas coisas.