10 dicas para evitar dores de cabeça

Neste post estarei mostrando 10 dicas simples, mas que com certeza lhes ajudarão a obter uma maior produtividade no processo de desenvolvimento e atualização de seus documentos pra web. São coisas bem simples, mas que podem fazer toda a diferença e economizar um bom tempo (e fios de cabelo) se seguidas corretamente. Vamos lá?

1. Comente seu código

Já imaginou ter que editar um documento de 200 linhas (pra ser otimista), criado a mais de um mês? E se não tiver sido você quem criou? Com certeza, você teria muito trabalho até entender o código, pra só então começar a editar, não é?
Comentários evitam essa perda de tempo (e fios de cabelo) de ter que ficar analisando o código, linha por linha, até que você consiga finalmente distinguir as partes do site a que cada bloco de código se refere. Com isso, não importa a quanto tempo foi feito, ou quem fez o código, ele sempre estará explicadinho, pronto pra ser atualizado pelo felizardo (e não coitado) que for designado pra isso.

2. Estruture seu código corretamente

Use e abuse das indentações, pois elas ajudam (e muito) a identificar elementos “pais” e seus respectivos “filhos”. Por exemplo, se for criar uma div, e dentro dela for colocar uma lista e um parágrafo, faça a div, passe pra linha de baixo, indente (pressionando TAB em qualquer editor), crie o parágrafo. Salte uma linha, crie a lista (com a mesma indentação do parágrafo, já que ele também está dentro da div), passe para a próxima linha, indente mais uma vez, crie os sub-elementos da lista todos com a mesma indentação.
Fazendo assim, você evita ter que ficar toda hora voltando mais acima no código e fazendo uma contagem mental, pra ver dentro de qual (ou quais) elementos está o elemento que está querendo.

3. Feche suas tags assim que abrí-las

Você cria uma div. Dentro da div, um título, um parágrafo, outra div e, dentro dessa outra div, uma lista, dentro dos elementos dessa lista, um link… ops! Me perdi todo! Quais tags faltam pra eu fechar mesmo?
Evite ter que ficar voltando no código pra se localizar, feche suas tags assim que abrí-las. O Validador do W3C ajuda a identificar as tags que não foram devidamente fechadas, mas nada melhor do que passar direto na validação, não é?

4. Nomeie corretamente suas id’s e classes

Procure nomear suas id’s e classes de acordo com sua função no layout, e não com sua aparência ou posição.
O Diego Eis, do Tableless, escreveu um artigo (artigo muito bom, diga-se de passagem) inteiro só sobre isso. Não vou entrar em detalhes aqui, mas indico que dêem uma lida no artigo dele.

5. Use folhas de estilho externas

Evite documentos gigantescos. Crie seu documento CSS separado do XHTML. Com isso, além de reduzir considervelmente o número de linhas dos seus documentos, quando você tiver que fazer uma atualização, seja no CSS ou no XHTML, você terá tudo separadinho em um único documento. Portanto, use e abuse das tags <link />.

6. Evite estilos inline

Ainda de acordo com o item anterior, utilizar estilos inline só lhe trará dores de cabeça quando tiver que editar somente alguns trechos do seu CSS, pois você terá que sair vasculhando seu XHTML até encontrar aquele bendito elemento que você deseja modificar. Tempo é dinheiro (principalmente se você é freelancer), não o gaste à toa: use somente folhas de estilo externas para estilizar seu documento.

7. Baseie-se sempre no Firefox

Ou no Opera. Não faça seus sites baseando-se apenas no IE, pra depois tentar tirar a diferença nos outros browsers. Baseie-se primeiro nos browsers decentes, e só então corrija os defeitos do IE. É mais fácil adequar o código correto à renderização errada do que o inverso.

8. Use comentários condicionais

O IE7 não terá suporte aos hacks CSS que conhecemos hoje (já vi que, ao invés de soluções, ele trará é mais problemas pra nós). Para evitar de quebrar seu teclado e/ou monitor a cabeçadas tentando desenvolver sites compatíveis com Firefox, Opera (e os outros decentes), IE6 e IE7, a Microsoft recomenda o uso dos Comentários Condicionais, que são suportados desde a 5ª versão do browser azul.
O Henrique, do Revolução Etc escreveu dois artigos sobre comentários condicionais para o IE, um no próprio Revolução Etc e outro no WebInsider. Recomendo a leitura e a prática dos conselhos dele.

9. KISS!

Calma, calma, eu (ainda) não estou ficando louco de tanto escrever. KISS é um acrônimo para “Keep it simple, stupid” , em português, algo como: “Mantenha simples, estúpido”.
A idéia básica é simplificar ao máximo o código. Se você já está ficando perdido no meio de tanto código, é bem provável que não esteja conseguindo manter as coisas simples, então, nesse caso, é melhor rever seu código e procurar onde ele pode ser simplificado. Uma maneira de se conseguir a simplicidade sem maiores dores de cabeça, é estar sempre bastante atento àquilo que eu já defini como princípio primordial para o desenvolvimento com Web Standards: a semântica.

10. Valide, valide, valide… e valide!

Mesmo seguindo à risca as outras 9 dicas, ainda é possível que, por uma falta de atenção ou erro de digitação, o seu código contenha algo de errado. Nesse caso, o Validador do W3C pode ser bastante útil na identificação desses possíveis erros. Evite ficar voltando no código pra detectar pequenos erros, deixe que o validador faça isso por você.

Bom pessoal, essas são as dicas que eu tinha pra passar. Espero que elas possam lhes ser úteis no dia-a-dia e que venham a ajudá-los no processo de desenvolvimento e atualização dos seus códigos.

Um abraço e até a próxima!

About these ads

9 Comentários

Arquivado em Artigos, Cotidiano, CSS, XHTML

9 Respostas para “10 dicas para evitar dores de cabeça

  1. Dicas úteis, Jader. Principalmente pra quem busca referência de XHTML/CSS. abraços

  2. ^^ ótimas dicas… ^^ muitas eu nao segui a risca quando mexia com css, e quando dava pau eu até desanimava pra voltar e corrigir ^^
    flw, um abraço…

  3. Excelentes dicas. Lembrando também que uma boa semântica ajuda muito o site a ficar mais dentro dos melhores padrões.

  4. Claro, Ricardo… Semântica é tudo!
    Eu não quis citar esse assunto porque eu queria dar dicas mais simples e práticas do que técnicas.

  5. André M.

    Excelentes dicas. Acho importante considerarmos que nem sempre é possível deixar de utilizar estilos inline (isso mereceria até mesmo um artigo) quando se usa ferramentas de gerenciamento de conteúdo (CMS). Muitas destas ferramentas fazem uso do Htmlarea e é nestas horas em que entram os estilos inline. Claro que não há problema em que a ferramenta coloque ou , mas quando coloca ou ou ainda utilize estilos como aí fica difícil lidar com a situação, já que o código é gerado (e na maioria das vezes, se baseiam no DOM do IE com código proprietário e não válido) pelo próprio Htmlarea (que, aliás, já é o nome de um programa e que foi descontinuado) ou equivalente ao htmlarea. Esse assunto mereceria um artigo: Códigos Válidos, Semântica, Acessibilidade e os CMS (ou seria versus os CMS?)

  6. Bem observado, André. Mas veja bem, eu disse (ou pelo menos quis dizer) para evitar o uso de estilos inline.
    Quanto ao uso do atributo style no HTML, em determinados casos eu sou a favor, e até uso, aliás, estou usando no projeto que estou desenvolvendo no momento pela agência onde trabalho.
    E quanto à sugestão do tema pra um possível artigo, é bem interessante. Estou tentando preparar um material legal sobre CSS (é, tentando! o trabalho não tá ajudando… rsrs), mas vou pensar na possibilidade.
    Valeu por paticipar.

  7. André M.

    Vi que meu texto saiu meio cortado. Bem, mas espero ter conseguido me fazer entender. Uma outra coisa que esqueci de mencionar é quando um autor (utilizando uma ferramenta de gerenciamento de conteúdo – através do htmlarea) pega um texto de um site (dele mesmo, vamos dizer), seleciona, copia e cola. Aí é um desastre… O htmlarea aceita aquele código e daí é um Deus-nos-acuda, pois o que termina entrando de código sujo não é brinquedo. Se a ferramenta usada permite um pós-processamento para remoção de códigos sujos, então a situação melhora. No entanto, isso exige certas “manobras”. Aqui está um algo mais para um artigo. Valeu pela resposta, Jader!

  8. Otimas dicas, vão ajudar e muito pra quem não saca muito de organização.

    Uma coisa que tenho problemas aqui na agência é com o gerenciadores de conteudo. Por mas que eu desenvolva um site em Webstandards, quando passamos o para o cliente o site totalmente é inserido com tabelas. Muitos dos conteudos no gerenciador já com as tabelinhas :D

  9. Olá, sou usuário do Snapbuilding, um gerenciador de conteúdo desenvolvido pela Snapsystems, estou muito satisfeito, com este sistema, pois atualizo meu site de qualquer lugar, não precisa de conhecimentos profundos em design e programação, possui várias funcionalidades, blog, enquete, formulário de contato, newsletter, mapa de localização, enfim, recomendo!

    http://www.snapsystems.com.br