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.
24 Comentários
24 Comentários
Paulo 16/07/2006 às 11:19
muito bom, Diego!
Ricieri Garcez Rosa 16/07/2006 às 13:07
Boa dica, semântica é tudo, inclusive na nomeclatura dos arquivos.
O'Marin 16/07/2006 às 14:04
Agora sim entendi o problema dos nomes. Ótimas dicas.
Wanderson Martins 16/07/2006 às 16:09
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…
Maicon Junches 16/07/2006 às 20:29
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!
Fred`` 17/07/2006 às 11:26
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…
Thalis Valle 17/07/2006 às 11:47
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.
Thiago Rocha 17/07/2006 às 13:13
Mais uma (*) para vc Diego!
Excelente post. Uma dica fundamental, vai me ajudar bastante.
Felipe Gomes 17/07/2006 às 13:19
Muito pertinente esse post.
Vários profissionais ainda não entendem muito bem de nomeclatura ou não dão o devido valor.
Gostei, Diego.
Um abraço a todos,
Felipe Gomes
http://www.felipegomes.com.br | contato@felipegomes.com.br
beto 17/07/2006 às 17:20
…no terceiro paragrafo ao inves de XHTML, vc digitou XTHML…
Valeu a dica!!!
abraço
Julio Luiz Vedovatto Neto 18/07/2006 às 13:17
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
Camilo 19/07/2006 às 09:43
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!
Tainã Miranda 20/07/2006 às 15:14
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 \\:d/
Renato 26/07/2006 às 14:41
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.
Jader Rubini 12/08/2006 às 19:29
Excelente artigo, camarada… Tanto que o citei e linkei em um post no meu blog
Abraços
Roberta Fabiana SAntos Gomes 31/08/2006 às 19:40
Sobrenomes
caroline 22/09/2006 às 16:09
excelente o trabalho de vocêis gostaria muito
de sempre contar com vocêis
Eduardo IBDNEVES 10/10/2006 às 00:11
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.
KISS! « JulioGreff 04/11/2006 às 13:59
[...] 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. [...]
Júlio Greff » Arquivo » KISS! 14/05/2007 às 14:19
[...] à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 [...]
tiagosouza.com » 10 dicas para evitar dores de cabeça 04/08/2007 às 10:47
[...] 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, [...]
» Layout Fixo / Fluido de 3 colunas em 8 Minutos - Tableless - Desenvolvimento com Padrões Web 14/06/2008 às 18:32
[...] [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. [...]
daiane oliveira 21/06/2008 às 20:21
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…
Julio Greff» Arquivo do Blog » KISS! 25/10/2008 às 16:41
[...] à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 [...]