Qual é o comprimento máximo prático para id HTML?

88

A especificação HTML diz

Os tokens de ID e NOME devem começar com uma letra ([A-Za-z]) e podem ser seguidos por qualquer número de letras, dígitos ([0-9]), hifens ("-"), sublinhados ("_") , dois pontos (":") e pontos (".").

E embora a declaração SGML do HTML 4 use o valor 65536 para NAMELEN, ela indica "Evite limites fixos."

Mas certamente os navegadores, as implementações CSS e os kits de ferramentas JavaScript devem ter alguns limites no comprimento que suportam. Qual é o menor limite seguro para usar em um aplicativo HTML / CSS / JS?

PAUSA do sistema
fonte
3
Obrigado e +1 por apontar que os IDs devem começar com uma letra. Já usei IDs como '1', '2', '3', '4', '5' no passado sem problemas. Eu faço muitos widgets relacionados a pesquisas e elementos interativos e, usando o IDS como este, é um atributo de 'pontuação' conveniente, bem como uma referência de ID. Hoje eu estava tentando fazer funcionar algum CSS que realmente deveria ter funcionado. Eu até passei pelo validador W3C e ele não me alertou sobre esse problema ... Mas esse post sim. E agora, quando eu mudei id = '5' para 'x5x' o css funciona ... Agora eu só tenho que mudar a sub-rotina de pontuação para retirar os x! Obrigado novamente.
Ben A. Hilleli

Respostas:

216

Acabado de testar: 1 milhão de caracteres funciona em todos os navegadores modernos: Chrome1, FF3, IE7, Konqueror3, Opera9, Safari3.

Suspeito que IDs ainda mais longos podem se tornar difíceis de lembrar.

phihag
fonte
15
Esse cara fez 10 "milhões" de personagens! stackoverflow.com/a/1496150/74585
Matthew Lock de
1
Eu sinto Muito. 1M? Como em 1 milhão?
beliha de
8
@phihag Quando estudei CS em Toronto, e o instrutor brincou que "todo mundo sabe por que faltam 10 dias no calendário gregoriano em outubro de 1582", tive que perguntar a um colega, que me olhou com condescendência e disse " Por causa da adoção do calendário gregoriano, o quê, você nunca foi à escola primária? " Eu não tinha. Não no Canadá. Eu fui para a escola primária no Egito e aprendi sobre o calendário islâmico. A mesma coisa com os prefixos SI: você pode ter o benefício da educação ocidental, eu não. Mas obrigado pela atitude condescendente, no entanto.
beliha
2
@beliha Tenho a certeza que pelo menos aqui em Portugal nunca ouvi dizer que faltavam 10 dias no calendário gregoriano em Outubro de 1582, e imagino que não seja o único. Acho que a escola nunca ensinou isso pelo que me lembro, então seria ousado esperar que todos soubessem disso.
user7393973
1
@beliha eu fui para uma escola ocidental e nem aprendi que usamos o calendário gregoriano (não pelo menos com este nome), apenas usamos o termo do calendário padrão. e sobre esses 10 dias ausentes, aprendi no youtube.
Tinaira,
15

Um limite prático, para mim, é o tamanho de um ID que posso armazenar em minha cabeça enquanto estou trabalhando com HTML / CSS.

Esse limite é geralmente entre 8 e 13 caracteres, dependendo de quanto tempo estou trabalhando e se os nomes fazem sentido no contexto do elemento.

Nick Presta
fonte
5
Eu acrescentaria que pode ser possível estender o "buffer interno" de alguém usando prefixos, se necessário. :-)
Ben Blank
12
Essa questão ainda é muito importante, pois com RIAs, muitas vezes os IDs são gerados por código, e para serem únicos, podem ser longos; por exemplo: window_2_panel_12_group_6_label_2 _...
Josh
3

Às vezes, acabo com IDs muito longos, mas os nomeio de forma consistente para corresponder à sua finalidade exata.

Por exemplo...

<div id="page">
    <div id="primary-content"></div>
    <div id="secondary-content"></div>
    <div id="search-form-and-primary-nav-wrapper">
        <form id="search-form"></form>
        <ul id="primary-nav">
            <li id="primary-nav-about-us"></li>
        </ul>
    </div>
    <a id="logo"><img /></a>
</div><!-- /#page -->

Como você pode ver, os seletores são ocasionalmente bem longos. Mas é muito mais fácil IMHO do que trabalhar com algo como o YUI grids.css onde você acaba com IDs como #doc, #bd, # yui-main, etc.

Mark Hurd
fonte
3
O que eu faço muito é nomeá-los de forma hierárquica, então tenho um div id = 'user', então dentro dele eu posso ter três divs, id = 'user-stats', id = 'user-inventory', id = 'user- spells ', diga em user-stats que posso ter 5 divs, id =' user-stats-Strength ', id =' user-stats-agility ', id =' user-stats-defence ', id =' user- stats-intellect ', id =' user-stats-heath 'etc etc, que considero muito útil para lembrar seus ids, desde que mantenham as convenções de nomenclatura, ou seja, -'s ou _'s para espaços ou camelCase.
Psytronic
2

Se esta é uma questão acadêmica, é muito interessante ... mas no que diz respeito às melhores práticas, você não deve precisar - ou querer - estender isso. Se você precisar armazenar dados sobre um elemento HTML, é melhor colocá-lo em um atributo no objeto DOM.

Matt Howell
fonte