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ê?
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:
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.
id='l1c2'
Commented
8/11/2017 às 12:58
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.
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
id
apenas númerico, e sim apenas em html4. Se poderem remover os -1 dados nesta resposta por esse motivo eu agradeço.
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”.
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.
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.
Não é uma tarefa fácil. Os fragmentos abaixo foram retirados do livro que citei no início.
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
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?
À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.
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.
Aqui falei sobre o pouco do pouco que o livro aborda. É um leitura mais que recomendada para programadores. Boa leitura :)
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:
Dos 19 pontos que essa PEP fala, esses dois são bem aplicáveis nesse contexto.
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.
id='info_$i'
?ids
numéricos, vide primeira nota da recomendação. A especificação WHATWG também permite isso. Mas ainda a recomendação é que oid
inicie com uma letra, para manter a compatibilidade com o HTML 4.