¿Cuál es la longitud máxima práctica para la identificación HTML?

Question

El HTML spec dice

ID y NAME fichas deben comenzar con una letra ([A-Za-z]) y puede ser seguido por cualquier número de letras, dígitos ([0-9]), guiones ("-"), guiones bajos ("_"), dos puntos (":") y puntos (".").

Y aunque el SGML declaration de HTML 4 usa el valor 65536 para NAMELEN, indica "Evite los límites fijos".

Pero seguramente los navegadores, las implementaciones CSS y los kits de herramientas de JavaScript deben tener algunos límites en la longitud que admiten. ¿Cuál es el límite más pequeño que es seguro usar en una aplicación HTML/CSS/JS?

Answer 1

Acaba de probar: 1M caracteres funciona en todos los navegadores modernos: Chrome1, FF3, IE7, Konqueror3, Opera9, Safari3.

Sospecho que las identificaciones aún más largas podrían ser difíciles de recordar.

Answer 2

Si se trata de una pregunta académica, es bastante interesante ... pero en lo que respecta a las mejores prácticas, no debería necesitar - o querer - extender esto. Si necesita almacenar datos sobre un elemento HTML, es mejor ponerlo en un atributo en el objeto DOM.

Answer 3

Un límite práctico, para mí, sin embargo es una ID larga que puedo almacenar en mi cabeza durante el tiempo que estoy trabajando con el HTML/CSS.

Este límite suele ser de entre 8 y 13 caracteres, dependiendo de cuánto tiempo he estado trabajando y si los nombres tienen sentido en el contexto del elemento.

Answer 4

A veces voy a terminar con ID muy largos, pero los nombro constantemente para que coincida con su propósito exacto.

Por ejemplo ...

<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 se puede ver, los selectores son en ocasiones bastante largo. Pero es mucho más fácil en mi humilde opinión que trabajar con algo como grillas YUI.css donde terminas con IDs como #doc, #bd, # yui-main, etc.