por Diego Eis
Julho 16th, 2006
Nomenclatura no desenvolvimento web é um assunto que muitas vezes é ignorado pela maioria dos profissionais. E é o que muitas vezes causa problemas no decorrer do projeto.
Escolher nomes adeqüados, tanto para arquivos quanto para nomes de variáveis, identificação de elementos, seções e etc, é tão importante quanto qualquer outra parte do projeto. Este pequeno detalhe pode ser o começo de uma grande confusão sem volta.
Imagine um site simples com elementos básicos como um cabeçalho, uma coluna na esquerda, uma coluna no meio para o conteúdo e outra coluna no lado direito, e por último o rodapé.
Ao criar a estrutura XTHML para este site, o primeiro nome que vem a cabeça para nomear, por exemplo a coluna da esquerda é: id=”colunaesquerda”. Ou algo parecido, não é?
Este nome, com certeza é muito sugestivo e objetivo. Mas, infelizmente, pode lhe trazer problemas sérios. Suponha que este site seja feito com CSS, que lhe dá facilidade para mudar o layout facilmente mudando algumas linhas de código. Você ou seu cliente resolve que o site deve mudar um pouco de visual. Que a coluna da esquerda, deveria agora ficar do lado direito, e vice-versa.
Então, você localiza no CSS o objeto chamado #colunaesquerda e o posiciona à direita. Localiza o objeto #colunadireita e o posiciona à esquerda. Conseguiu calcular o problema? O elemento #colunaesquerda não é mais a coluna da esquerda, ele está alinhado agora a direita. Não parece estranho um objeto se chamar #colunaesquerda estar alinhado à direita?
Imagine o trabalho que será mudar este nome nos arquivos? Provavelmente você fará um post-it com esta observação e guardará embaixo do teclado, onde ele ficará esquecido até a próxima limpeza da faxineira.
Ter bons nomes é uma questão de semântica. Não é raro acontecer casos como o citado acima. Isto pode se tornar uma bola de neve. Uma vez errado, ficará errado até o final do projeto, e quanto mais tempo o erro continuar, mais dificil será corrigi-lo. Por isso, preste bem atenção quanto a nomenclatura de elementos.
Uma dica que sempre dou aos alunos aqui nos cursos, é nomear os elementos da página de acordo com sua função: Se na coluna da esquerda houver o menu principal do site, nomeio o div como #menuprincipal ou simplesmente #menu. Se a coluna da direita houver publicidade por exemplo, nomeie esta coluna como #publicidade e não #colunadireita. Isso evitará muito transtorno durante o desenvolvimento do projeto. Nomeie os elementos de acordo com sua função.
Esta regra de nomeclatura também pode ser aplicado à arquivos. Já falei aqui sobre Modulação de CSS. Se você irá criar arquivos CSS individuais para cada seção do site, nomeie de acordo com a função da seção do site. Se é um CSS que irá formatar o menu principal, o arquivo poderia se chamar menuprincipal.css. Nem preciso dizer que nomes como menu_principal_coluna_esquerda.css não são boas pedidas.
Lembre-se que nomenclatura dos elementos pode ser questão de semântica. É coisa séria e pode trazer muitos problemas se não for pensado direito. Gaste uns segundos a mais para elaborar nomes melhores. Não dói e previne dor de cabeça.
Se ainda estiver interessado, leia também:
Este post foi criado
na Domingo, Julho 16th, 2006 às 07:21 e está arquivado em Artigos.
Você pode seguir as atualizações pelo feed: RSS 2.0.
Você pode deixar um comentário, ou deixar um trackback de seu próprio site.
Boa dica, semântica é tudo, inclusive na nomeclatura dos arquivos.
Agora sim entendi o problema dos nomes. Ótimas dicas.
humm… Concordo, mas existem estruturas de determinados websites tão canonizadas e que você tem tanta certeza que elas nunca vão trocar de lugar, que eu não vejo problemas em ter uma coluna_direita e esquerda por exemplo. E “sim”, apenas em casos em que se tem toda a certeza. AGora, chegar ao ponto de ter um CSS chamado “menu_principal_coluna_esquerda.css” daí é demais rsrsrsrss…
Diego, muito bom isso. Me deu uma força pra deixar os trabalhos mais semâmticos.
Muita gente comete esse erro, eu era um deles, e a bola de neve gera muita dor de cabeça =)
Valeus!
Foi exatamente sobre isso que eu comentei no artigo que o Henrique escreveu sobre a reformulação do Webinsider. Tem nomes “sugestivos e objetivos” no código… 
Pois é. Isso eu já defendia a algum tempo, mesmo quando o tableless publicava exemplos desta maneira.
E agora com os microformats em alta, é bom pensar, antes de escrever. É bom planejar a arquitetura.
Mais uma 
para vc Diego!
Excelente post. Uma dica fundamental, vai me ajudar bastante.
…no terceiro paragrafo ao inves de XHTML, vc digitou XTHML…
Valeu a dica!!!
abraço
Muito bom o artigo (Y)
Assim … eu uso isso desde quando programo orientado a objetos.
Nas classes que montavamos, tinhamos que ser especificos com o que ela fazia;
ex: preencheFormularioLogin
(usando nomeclatura padrão da sun, inicio minuscula, outras palavras com inicial em maíuscula)
Desde entao uso isso até no css que eu faço heheheehe, eu sei que é padrão html tudo ser miniusculo, mas para classes e ids eu sempre coloco deste modo, fica mais “chamativo” para mim =p.
#menuPrincipal
[]’s
Boa dica Diego,
Mas faltou dizer que para o webdesigner que vai desenvolver um site em conjunto com um programador asp.net, precisa ter cuidado com as IDs, sendo mais recomendável usar as classes, pois na cabeça do designer pode acontecer que um div onde será colocado um texto ele resolva colocar “txtAlgumaCoisa”, só que pro programador, essa ID já foi usada numa textbox qualquer. Vai dar bode.
Quanto a nomenclatura, Julio, a forma que vc usa é chamada “Camel Case” e não é padrão Sun. É apenas mais um dos inúmeros padrões de nomear alguma coisa que não pode ser escrito separado! Existe tbém o “Pascal Case”, “Upper Case”, etc…
Prá finalizar, gostaria de saber, Diego, pq seu site dá pau quando é utilizado com o IE. Uma pessoa que se preocupa tanto em fazer as coisas acessíveis à todos os browsers, até para deficientes, deveria tbém se preocupar com o browser que domina a cena da internet (goste vc disso ou não!). Inviabilizando o acesso do IE ao seu site, vc artificialmente aumenta a participação do Firefox, fazendo todos crerem que ele tem uma participação maior do que realmente tem.
Eu gosto do firefox, uso esporadicamente o firefox, mas, gosto mais do IE! Prá acessar seu site, só uso o Fx simplesmente pq com o IE não funciona.
Se não me engano, já li vc criticar o baboo quando ele não era acessível ao fx, será que vc está infectado do mesmo mal? Ele percebeu a cagada a tempo! Só falta vc!
Abraços, parabéns pelos artigos! Continuo achando que vc deveria ser menos xiita… Mas, filtrando as ideologias, eles são muito bons!
Boa adorei, vo usar isso.
um bom padrão que uso é o de 4 em 4,
coloco os nome usando as 4 primeiras letras de cada palavra……
EX: menu principal = menu_prin.
Tanto no css como no xhtml isso é bom economiza código e facilita muito \
Comecei a me interessar por desenvolvimento web a pouco tempo, tenho aprendido bastante com essas dicas, espero poder fazer o curso algum dia, quando tiver mais grana, hehe… Está de parabéns.
Excelente artigo, camarada… Tanto que o citei e linkei em um post no meu blog 
Abraços
excelente o trabalho de vocêis gostaria muito
de sempre contar com vocêis
Tudo é uma questão de pensar um pouco,as vezes temos pressa de resolver um problema, e depois aparecem muitos outros a serem resolvidos. Adorei a questão da semântica.
[…] Procure dar nomes intuitivos às suas funções, atributos, blocos de código, enfim… O Diego Eis, do Tableless, escreveu um artigo muito interessante sobre nomear classes corretamente. Esse artigo pode também ser aplicado a qualquer coisa, que já citei a pouco. […]
[…] às suas funções, atributos, blocos de código, enfim… O Diego Eis, do Tableless, escreveu um artigo muito interessante sobre nomear classes corretamente. Esse artigo pode também ser aplicado a […]
[…] 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, […]
[…] [update] Muitas perguntaram porque não pode-se usar na prática, os id’s que eu utilizei no vídeo. Já escrevi sobre isso aqui: Sobre nome e sobrenomes. […]
Oi gostei de cada coisa…
Mas podia ser muito mais detelhado,pois seria mais prático para as pesquisas!!
Ah me desculpe pela invasão e pelo comentário tah.
Fui e boa sorte…
[…] às suas funções, atributos, blocos de código, enfim… O Diego Eis, do Tableless, escreveu um artigo muito interessante sobre nomear classes corretamente. Esse artigo pode também ser aplicado a […]
