Mantendo seu código organizado

Por Canha | 10 de outubro de 2008 | Tags: css, dicas, Web Design | 21 Comentários

Recentemente comecei a trabalhar com a Claudia no xCakeBlogs e isso me gerou uma necessidade que eu não tinha quando trabalhava sozinho: a organização de código.

A maioria de nós programa a nossa maneira, devido a alguns vícios de longa data. E isso gera problemas na hora de trabalhar em equipe. Então aí vai umas dicas que você pode implementar desde já nas suas tarefas de programação.

E por que começar agora, mesmo trabalhando sozinho? Para se acostumar. Faz bem.

Indente seu código

Quando você usa o TAB para espaçar seu código, a leitura dele fica mais fácil. Se uma DIV está dentro de outra, faça ele visualmente parecer que está contida lá dentro.

Defina padrões

Na grande maioria das vezes, tudo que vai ficar dentro da tag head vai ser igual a muitas outras páginas de projetos diferentes. Mantenha sempre uma ordem específica neles para facilitar na hora de mudar algo.

Comente seu código

As vezes tento procurar por determinada area do código e não acho. Comentários do tipo “bloco de anúncios vai aqui” ajuda horrores, ainda mais se um leigo quiser mudar algo.

Use nomes óbvios em classes

Evite nomes do tipo “bloco1″ quando for criar uma DIV. “Bloco1″ não significa nada, exceto que é um bloco com um número. Uma DIV com nome “conteudo_principal” já remete a algo mais óbvio.

Comente, não remova

Não é incomum você remover um pedaço de código que pode trazer problemas que você não note de primeira, ainda mais se não foi você que escreveu-o. Deixe aquilo comentado e preferencialmente com uma explicação de porque quis remove-lo.

Separe em pastas

Essa dica é simples: separe os arquivos comuns em pastas. Eu sempre crio uma pasta img para todas as imagens, css para as folhas de estilo, lib para javascript e psd para os arquivos fonte (como as imagens em Photoshop). Facilita a procura por um determinado arquivo.

Nomes padrões para arquivos

Afim de manter um padrâo e facilitar a vida de todo mundo, tente sempre manter um padrão para os nomes de arquivos. Por exemplo, o arquivo CSS padrão pode ser sempre main.css. Evite usar “main” em um projeto, “principal” em outro e “estilo” num terceiro. O mesmo vale para sub-nomes, ou categorias. Eu sempre uso form_proc.php para um script que só irá processar informações de um formulario, db_proc.php para processar um pedido ao banco de dados, etc.

Faça a limpa final

Antes de entregar o site finalizado, faça uma limpa nele; tire os comentários desnecessários, o excesso de espaços em branco (exceto a indentação), insira os nomes dos autores como meta-tag, assm como a data de última alteração e confira se está tudo bonitinho. Faça também os testes básicos (que deveriam ter sido feitos no decorrer do projeto, mas não custa nada tentar de novo).

Essas foram minhas dicas. Não são baseadas em nenhuma convenção ou semelhante. O aconselhável é que você defina seus próprios sempre baseado em linhas lógicas. Assim, quando qualquer um que entenda de programação bater o olho no que você fez, entenderá rapidamente como foi feito.

E você? O que mais faz para manter seu código limpo e de fácil entendimento?

Canha

Criador e editor-chefe do Design Blog, atualmente é web designer freelancer. Nerd desde pequeno, ama tudo relacionado a internet, é apaixonado por design e está na área a 11 anos.

Acesse seu site Siga no Twitter