views:

1075

answers:

5

The HTML spec says

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

And even though the SGML declaration of HTML 4 uses the value 65536 for NAMELEN, it notes "Avoid fixed limits."

But surely browsers, CSS implementations, and JavaScript toolkits must have some limits on the length they support. What is the smallest such limit that is safe to use in a HTML/CSS/JS application?

A: 

Smallest such limit?

Most browsers and stuff these days are fairly powerfull in this area and the info you're asking for isn't exactly stuff people ask for everyday, so a google search doesn't show it.

I'd go for 255 just to be safe...

Vordreller
+1  A: 

If this is an academic question, it's pretty interesting... but as far as best practices are concerned, you shouldn't need to -- or want to -- stretch these out. If you need to store data about an HTML element, it's better to put it into an attribute on the DOM object.

bigmattyh
+7  A: 

A practical limit, for me, is however long an ID I can store in my head during the time I'm working with the HTML/CSS.

This limit is usually between 8 and 13 characters, depending on how long I've been working and if the names make sense in the context of the element.

Nick Presta
I would add that it may be possible to extend one's "internal buffer" using prefixes, if necessary. :-)
Ben Blank
It is certainly possible. :)
Nick Presta
This question is still very important, because with RIAs, often times IDs are generated by code, and in order to be unique, can be long; as an example: window_2_panel_12_group_6_label_2_...
Josh
+12  A: 

Just tested: 1M characters works on every modern browser: Chrome1, FF3, IE7, Konqueror3, Opera9, Safari3.

I suspect even longer IDs could become hard to remember.

phihag
"I suspect even longer IDs could become hard to remember." -- LOL!
Josh
+2  A: 

Sometimes I will end up with very long IDs, but I name them consistently to match their exact purpose.

For example...

<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 -->

As you can see, the selectors are occasionally pretty long. But it's so much easier IMHO than working with something like the YUI grids.css where you end up with IDs like #doc, #bd, #yui-main, etc.

Mark Hurd
What I do a lot is name them heirachically, so have a div id='user', then within that I may have three divs, id='user-stats', id='user-inventory', id='user-spells', then say within user-stats I might have 5 divs, id='user-stats-strength', id='user-stats-agility', id='user-stats-defence', id='user-stats-intellect', id='user-stats-heath' etc etc, which I find to be very useful to remember their ids, aslong as I maintain naming conventions, ie, -'s or _'s for spaces or camelCase.
Psytronic