Tableless - Desenvolvimento inteligente com Padrões Web

23/02/2007
Artigos

O desenvolvedor e a ganância por economizar código

Está certo que o desenvolvedor é um bicho estranho, cheio de manias intratáveis e teimoso, mas muito teimoso. Mesmo assim há alguns pontos que podemos tratar antes que vire algo irrecuperável. Um destes pontos é a ganância por economizar código, …

Por


Está certo que o desenvolvedor é um bicho estranho, cheio de manias intratáveis e teimoso, mas muito teimoso. Mesmo assim há alguns pontos que podemos tratar antes que vire algo irrecuperável. Um destes pontos é a ganância por economizar código, seja ele qual for. Vamos pegar aqui exemplos de XHTML e CSS. Lembra do tempo que você trabalhava com códigos mais ou menos assim:

1
2
3
4
5
6
7
...
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background:url(http://www.siteruim.com/mot/image/topnav_bckgrd.gif) repeat-x;">
<tr><td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td width="91" valign="top"><table width="91" border="0" cellpadding="0" cellspacing="0" class="spacertable">
<tr><td colspan="3"><img src="/mot/image/spacer.gif" alt="" width="1" height="10" /></td>
</tr><tr>
<td width="10"><img src="http://www.siteruim.com/mot/image/spacer.gif" alt="" width="10" height="1" /></td> ...

Lembra?
Muitos faziam código deste modo e para economizar, não fechavam tags como TD ou TR. Os mais maníacos colocavam o código em uma linha. Bom, naquele tempo passado até que podíamos relevar porque o código era de fato terrível. Mas o que leva um sujeito optar a ter estes mesmos hábitos quando o desenvolvimento usa Padrões Web?

Sempre que estou dando alguma aula sobre XHTML e CSS, tento ressaltar que agora temos mais liberdade. Podemos (e devemos) fechar todas as tags sem medo de deixar o código mais pesado. Além do mais, você economizou alguns Kb só fazendo o site sem tabelas.

Código XHTML tem que ser identado, organizado, com todas tags fechadas e seus atributos bem colocados e com seus valores entre aspas. Nada de colocar tudo em uma linha e sair satisfeito com o resultado. Abuse da organização ela vai te aliviar das dores de cabeça e te livrar de problemas graves.

Mesma coisa acontece com o CSS. Alguns desenvolvedores resolvem por as propriedades em uma linha apenas. Isso prejudica a legibilidade do código, atrasa a manutenção e deixa o código sujeito a erros. Quebre linhas depois de cada propriedade. Mantenha o caminho completo nos seletores, como sugerido no post anterior.
Já vi muitos dos meus alunos com medo de deixar o código CSS com muitas linhas. Relaxe. No começo ele vai ficar com muitas linhas, vai mesmo. Meu primeiro CSS decente teve por volta de mil e poucas linhas! Não, não tinha organização nenhuma. Havia muito código redundante, vários hacks e milhares de conflitos e pra ajudar o site era enorme. Mesmo assim era muito melhor/menor que um site feito em tabelas.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://willgm.com William Grasel Martins

    Se tratando de desenvolvedores Web eu conheço o contrario…

    Muitas pessoas que fazem sites com tabelas ou em qualquer WYSIWYG falando “de que adianta economizar algumas tags tendo todo esse trabalho”.

    Depois que se aprende a fazer tudo nos padrões e com tableless se torna pratico, rápido e com fácil manutenção! Mas a partir do momento que se economiza em excesso isso se torna ruim também… mas convenhamos, tem coisas que só se aprende na pratica. Depois que temos que fazer manutenção em algum código nosso antigo que realmente percebemos como as “boas praticas” nos ajudam…

  • http://project47.viscountbox.com Carlos Eduardo

    Não vejo como pensar em “economizar” tags, deixando de fechar algumas… Pode acarretar em muitos erros!

    Já na parte do CSS, eu faço todas as propriedades de cada regra em uma linha… Acho bem mais prático do que deixar cada propriedade com uma linha, pois o arquivo fica muito maior, sem necessidade.
    Não prejudica em nada a manutenção e o código fica beem menor.

  • http://www.ferrari.eti.br Carlos André Ferrari

    Eu deixo o CSS em uma linha apenas quando ele possui apenas uma propriedade, senão fica identado e bonitinho…

    com relação ao source da pagina em uma linha, estou desenvolvendo um framework MVC que antes de mandar a pagina para o browser, ele remove todos os excesso de espaços (mais do que um) e remove as tabulações. isso para economizar alguns bytes mesmo. no final se tem um codigo linear no navegador.

    []‘s

  • silici0

    Não vejo como economizar tags e deixa-las abertas, fora os erros o código fica ilegivel depois.

    Ainda mais eu que trabalho com muitas tabelas ‘ainda’, culpa dos designs q usam WYSIWYG, algumas coisas eu passo pra CSS outras eu so arrumo identação e fecho as tags abertas, sou coder em php. :P

    Isso é parte do meu trabalho ? nah

    Eu acredito e luto pelo código padronizado, mas nem todos querem ajudar, ai não sobrando tempo pro retrabalho, algumas coisas ficam fora do padrão, uma pena. =)

    Cheers

  • http://www.vitorgga.com VitorGGA

    E com o tempo a gente vai ficano baum!!!

  • http://mercurio.info,tm Paulo Sampaio

    cara, é muita preguiça deixar o código sem tags(e olha que sou baiano hein!), tudo bem que economiza alguns bytes, mas hoje em dia até a internet discada é rápida o sufciente pra aguentar esse pouquinho a mais…

    sem padrões como ficariam as outras profissões? desenvolvedor web precisa se padronizar também!

  • http://www.setadigital.net Tiago

    uma boa dica é validar o código css.

  • Marcelo

    Acredito que isso é uma questão de cultura mesmo, que está mudando, graças ao bom deus. Muitos abrem mão da organização para economizar alguns KB, mas quando se está em equipe, isso se torna o terror da padronização, uma vez que o código deve ser legível a todos, e está organizado, entre espaços, identações e em linhas adequadas, fica mais fácil para tanto leigo, quanto experiente entender.

    Uma arquitetura de desenvolvimento que funciona para essa economia de código é a de separar arquivos de desenvolvimento (com identações, e todos os espaços possíveis) em favor da equipe, e o ambiente de produção, disponível ao usuário, que pode ir sem formatação qualquer. É o que um compilador e ou interpretador faz, ignora esses espaços.

    Embora seja eficaz, acaba por não ser tão adequado para aqueles ávidos por visualizar o código HTML e CSS de um site por exemplo.

    []‘s

  • http://mauriciofedatto.blogspot.com Maurício Fedatto

    É galera… pelo geito todos concordamos que a mantenabilidade, compatibilidade e confiabilidade são mais importantes que a economia de bytes.

    Acho que esta turma que comenta já está mais amadurecida que o pessoal que precisa deste toque.

    Pena que a maioria das pessoas que não se importam com estas diretrizes não costumam ter o hábito de rever suas técnicas =P

  • http://www.interior.info/blog daniel barbosa

    eu acho que isso de não fechar as tags ainda é feito por pessoas que nem sabem o que é xhtml, não é possível. Diego, vcs já publicaram no blog algo sobre CSS repetido (não sei o termo técnico ehehehe), exemplo: duas funçoes em css sendo que uma exclue a outra? Aquele lance do efeito em cascata, que quase todo mundo passa direto pelas explicações disso mais acredito que seja muito importante, seria legal um tuto no site sobre isso. Valeu, parabéns pelo site.

  • http://elmicox.blogspot.com Micox

    O triste é ainda ver gente dizendo que o desenvolvimento baseado em CSS é só modismo e enganação.
    Escondem sua preguiça por trás de críticas infundadas.
    Vejam os comentários: http://webinsider.uol.com.br/index.php/2007/02/19/o-site-de-meu-cliente-ainda-nao-e-tableless#comments

  • http://sapiensdc.com.br Luiz Gustavo Aleagi Nunes

    Olá à todos,

    Pois é, essa coisa do CSS pequeno, otimizado e organizado é algo realmente bastante complicado. Eu acho que essa organização e otimização funciona muito bem com sites pequenos e com uma certa liberdade de prazos.

    É claro que com o tempo a gente vai se organizando melhor, visualizando os problemas antes deles acontecerem e criando elementos mais elásticos e adaptáveis, mas tudo realmente depende do volume de páginas, da complexidade gráfica do visual e, o mais importante, se o ambiente é estático ou dinâmico.

    É muito comum recebermos layouts extremamente complexos e onde tudo é quadradinho, mas quando ele entra no sistema e se depara com a dinamicidade “in loco” aí a coisa complica…

    Haja hack para consertar tudo para o ma-ra-vi-lho-so IE (e se não bastasse o 6, agora tem o ben-di-to do 7).

    Haja paciência…

    Beleza de artigo Diego! Grato por compartilhar sua experiência conosco!

    Abraços!

  • http://www.netsuprema.com.br Diego

    pra organizar o css eu utilizo um editor chamado TopStyle que já esta na versão 3, alem de me ajudar a escrever as tags html ele ainda tem uma ferramenta chamada style sweeper que identa e organiza o css de acordo com um criterio estabelecido(alfabetico, dependencias etc), alguem conhece um outro melhor? compartilhem com agente,

    beleza de artigo Diego meu chará *rss