12

Eu tenho um loop printando elementos HTML, por exemplo:

for($i = 0; $i < 3; $i++){ echo "<div id='$i'>$i</div>"; }

É uma má prática colocar números como id em elementos HTML? Se sim por quê?

5
  • 1
    O id deveria ser único. Se você garantir essa unidade, não vejo problemas nesse quesito. Eles também deveriam ser mnemônicos, fáceis de lembrar. Se você conseguir se organizar com números, também não vejo problemas. Eu sou incapaz de me organizar apenas com números, prefiro identificador textual Commented 8/11/2017 às 11:34
  • Então no meu caso, eu vou identificar elementos pelo numeral e inserir em uma tabela o conteudo desse elemento, como tenho N elementos vou utilizar uma estrutura de repetição. prefiro também um indetificador do tipo texto. Commented 8/11/2017 às 11:37
  • 2
    E que tal concatenar? Como id='info_$i'? Commented 8/11/2017 às 11:39
  • Pra todo mundo que está chegando agora: sim, é uma má prática, mas não, não é proibido. Um dígito é um caractere alfanumérico. Commented 8/11/2017 às 12:45
  • 1
    A partir do HTML 5 a W3C permite o uso de ids numéricos, vide primeira nota da recomendação. A especificação WHATWG também permite isso. Mas ainda a recomendação é que o id inicie com uma letra, para manter a compatibilidade com o HTML 4.
    – Woss
    Commented 8/11/2017 às 12:59

3 Respostas 3

11

Como o @Renan disse, um número é um caractere alfanumérico. Eu concordo que usar apenas números é má prática, mas não vai contra o que a W3C estabelece.

Realmente "não há nenhum problema técnico", mas como você perguntou sobre "má prática", sim existe um problema.

Veja que na seção 3.2, os elementos do HTML5, sobre o atributo ID, é dito:

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

Que em tradução livre seria:

O atributo id especifica o identificador exclusivo (ID) do elemento. O valor deve ser exclusivo entre todas as ID na subárvore de origem do elemento e deve conter pelo menos um caractere. O valor não deve conter nenhum caractere de espaço.

Com isso é estabelecido as normas para uso do ID:

  • Não deve conter nenhum caractere de espaço;
  • Deve ser único;
  • Deve conter pelo menos um caractere;

E de brinde deveriam ser mnemônicos, fáceis de lembrar. Eu também sou incapaz de me organizar apenas com números, prefiro identificadores textuais.

Muito dificilmente eu conseguiria lembrar, a posição de uma tabela somente com números, por exemplo <div id='12'></div> para representar a linha 1 e coluna 2. Seria muito mais simples <div id='l1c2'></div> e/ou derivações semelhantes.

O identificador exclusivo de um elemento pode ser usado para vários propósitos, principalmente como uma maneira de vincular a partes específicas de um documento usando identificadores de fragmentos, como uma forma de segmentar um elemento quando está usando scripts e como forma de modelar um elemento específico de CSS.

Particularmente vejo muito mais praticidade através de caracteres alfanuméricos. A quantidade de vezes que me perderia procurando pelo número em um arquivo HTML com JavaScript, CSS e outras tecnologias, ficaria inviável o trabalho, enquanto que com caracteres alfanuméricos ou somente textuais traria muito mais praticidade. Imagine procurar por uma div com ID número 1, e procurar por uma div com ID div-da-esquerda. A chance de repetição, que o editor de texto, possa encontrar, é bem menor e improvável em elementos com ID não numéricos.

Como recomendação, sempre que possível, tente utilizar nomenclatura que reflita o atributo de conteúdo id. E evite utilizar nomes desconhecidos e/ou estranhos. Não é porque eu posso criar variáveis com nomes aleatórios como:

String qualquercoisaquequisercolocaraleatoriamente = 'qualquervalor';

Que eu vou criá-las assim. Programadores escrevem código, mas bom programadores escrevem códigos que sejam compreensíveis tanto por humanos como por máquinas.

5
  • 4
    Um número é um caractere alfanumérico. Eu concordo que usar apenas números é má-prática, mas não vai contra o que a W3C estabelece. Commented 8/11/2017 às 12:38
  • A norma diz must contain at least one character. Eu entendo que ela não explicitamente diz, como você diz, mas como o AP perguntou sobre "má prática", achei interessante ressaltar os motivos que isso "fere a norma". Commented 8/11/2017 às 12:49
  • @Renan ainda acredito que se fosse o caso a W3C teria colocado como alphanumeric character. E não somente um character. Commented 8/11/2017 às 12:52
  • 4
    Neste caso, devo concordar com o @Renen, caracter está sendo usado no sentido amplo neste caso. De qualquer sorte, +1 pelo id='l1c2' Commented 8/11/2017 às 12:58
  • 2
    Acho que "caractere" é qualquer caractere, incluindo números. Tanto que esse mesmo documento menciona "U+000A LINE FEED (LF) characters" ou "each U+002D HYPHEN-MINUS character (-)". Se fosse apenas letras e números ele iriam mencionar, como fizeram em outros trechos " character in the range U+0041 to U+005A", ou seja especificando quais são os caracteres.
    – Inkeliz
    Commented 8/11/2017 às 13:08
10

Realmente não há nenhum problema técnico em se utilizar somente números como seletores no CSS desde que você garanta que nunca irá se repetir os seletores de ID para diferentes elementos. Agora, imagine um cenário mais complexo, com inúmeros elementos HTML e inúmeros seletores para se "decorar", afinal, você não pode contar que irá lembrar de todos os seletores de cabeça quando estiver desenvolvendo. Por isso existem algum design patterns e boas práticas que são altamente recomendados para que seu processo de desenvolvimento flua e acabe sendo mais rápido, afinal, tempo é dinheiro.

Achei este artigo bastante interessante sobre como nomear IDs e classes no CSS para facilitar no desenvolvimento. Existe também este link de um style guide do Google, que é bem interessante também.

Quanto a design patterns, recomendo este livro que aborda diferentes design patterns de desenvolvimento para HTML5 e CSS.

5
  • Verdade @Isac realmente havia esquecido deste detalhe. Obrigado pelo seu adendo! Commented 8/11/2017 às 12:03
  • 3
    Um número ainda é um caractere. Por isso dizemos alfanumérico. Commented 8/11/2017 às 12:44
  • 1
    A resposta está correta, não há necessidade dos negativos. A regra da W3C informa apenas que deve conter pelo menos um único caractere e que seja distinto dos demais id, dessa forma utilizando números pode não ser uma boa prática falando de semântica, porém não há nada que impeça isso além do próprio desenvolvedor. Commented 8/11/2017 às 12:46
  • 1
    Peço desculpa a todos pela forma como interpretei a regra. Não existe de facto impedimento para html5 em usar id apenas númerico, e sim apenas em html4. Se poderem remover os -1 dados nesta resposta por esse motivo eu agradeço.
    – Isac
    Commented 8/11/2017 às 12:50
  • 1
    @Isac de mim você tem +1, sua resposta é boa. Commented 8/11/2017 às 12:58
5

Minha resposta tende a desprender do contexto HTML, embora seja totalmente aplicável. Isso porque as respostas existentes já respondem esse lado da pergunta. Quero abordar um conceito mais amplo.


Uma das coisas mais importantes (e para a maioria não é tão importante assim) que o livro "Clean Code: A Handbook of Agile Software Craftsmanship", do Robert C. Martin, aborda é a nomenclatura que você dá para variáveis, classes e tudo mais. Isso você encontra no capítulo 2, “Meaningful Names”.

Seja expressivo e auto-explicativo ao nomear. Mas por que?

A mentalidade que você tem que ter ao programar é que está programando para outras pessoas lerem seu código mais tarde. Um dia aquele trecho de gambiarra que nem você entende terá que ser mantido por alguém. O mais engraçado é que esse alguém pode ser tanto você daqui a alguns meses como uma equipe inteira.

The only valid measurement of code quality: WTFs/minute

A única medida válida de qualidade de código: WTFs por minuto

Para provar o que eu estou dizendo, me responda: o que é que esse código faz?

for (int j = 0; j < 34; j++) {
    s += (t[j] * 4) / 5;
}

Da sala da revisão de código:

"WTF?! WTF?! WTF?!"

Provavelmente você não sabe e nem os revisores! Não é só porque você não sabe de que projeto ele é, ou nem a linguagem de programação. É porque as variáveis estão pessimamente escritas. Veja o mesmo código com um pouco mais de expressividade e auto-explicação:

const int realDaysPerIdealDay = 4;
const int WORK_DAYS_PER_WEEK = 5;
int sum = 0;
for (int j = 0; j < NUMBER_OF_TASKS; j++) {
    int realTaskDays = taskEstimate[j] * realDaysPerIdealDay;
    int realTaskWeeks = (realdays / WORK_DAYS_PER_WEEK);
    sum += realTaskWeeks;
}

Não só as variáveis estão melhor nomeadas mas como aqueles números que estavam fixos e fazendo cálculos foram movidos para constantes. Isso para deixar o código explicar-se por si mesmo e não precisar de milhares de comentários explicando o que ele faz.

Escrevendo nomes significativos

Não é uma tarefa fácil. Os fragmentos abaixo foram retirados do livro que citei no início.

Os nomes devem revelar suas intenções

Só como você irá nomear uma função, classe ou variável você consegue transmitir a quem lê o que ela faz, como faz, por que faz e como ela é usada.

int tmm; // não use
int tempoMedioMinutos; // use
int tempoMedioEmMinutos; // use

Evite desinformação

Para as linguagens que são fracamente tipadas, como JavaScript, isso pode causar um problemão. Por que você nomearia uma variável de listaContas se ela nem é uma lista?

Faça distinções com significado

Às vezes utilizamos palavras que não adicionam em nada ao nomear uma classe.

O que você me fala das classes Produto, ProdutoInfo e ProdutoData? Elas são diferentes? Em que? Nesse caso, volte lá para "Os nomes devem relevar suas intenções" e reescreva com significado.

Use nomes procuráveis

Lembra lá atrás que falei da constante depois de te perguntar o que aquele código significava? É o mesmo caso.

if (visitor.CountryCode == '1237') { 
    visitor.redirectTo('/al');
}

contra:

const BLOCKED_COUNTRY_CODE = '1237';
if (visitor.CountryCode = BLOCKED_COUNTRY_CODE) {
    visitor.redirectTo('/al');
}

Conseguimos dar significado para um valor que era acoplado de uma maneira fixa, constante. Assim fica fácil de ler e de achar também.

Mais...

Aqui falei sobre o pouco do pouco que o livro aborda. É um leitura mais que recomendada para programadores. Boa leitura :)

Além do Clean Code

Não é só o livro que aborda isso. A PEP 20, do Python, comumemente "The Zen of Python", que pode ser aplicada não só ao Python, fala que:

  1. Legibilidade de código conta
  2. Explícito é melhor que implícito

Dos 19 pontos que essa PEP fala, esses dois são bem aplicáveis nesse contexto.

  • Prefira a legibilidade, escreva para que os outros ou o futuro-você entenda
  • Seja explícito ao nomear os membros e ao utilizar as características de uma linguagem.

Das premissas levantadas aqui, você pode inferir se nomear:

<div id='1'>1</div>
<div id='2'>2</div>
<div id='3'>3</div>

é uma má prática ou não. Pode até concluir se $i = 0 é bom ou não.

Agora sempre que programar, pergunte a si mesmo: quantos WTFs por minuto você receberia na revisão de código?

Tem um vídeo do Filipe Deschamps sobre a importância dos nomes e o Clean Code. Na verdade tem uma série de vídeos sobre o Clean Code. Disse ele:

Se a gente pensar que tirando a sintaxe de um código, basicamente o que resta é um monte de nome atrás de outro nome, chamando outro nome e assim por diante.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .