Avoiding ids in html elements

I'm developing a javascript-based application.

Using id's to identify elements is often considered a bit bad, because id's are global and it would instantly mess up if I happen to have a collision.

What are some effective ways to avoid this? Is it ok to use use classes wherever you normally use id's or are there drawbacks. Note that I'm not as much interested in the css side of things, just the javascript.

edit: I think I got my answer, but just so we're clear, I wasn't talking about duplicates in the document object. I want to build a set of re-usable components. Generally I'd access them by their id.

I'm not generating the html using the DOM, there's an html template that's then 'enriched' by javacript. The problem starts when I want to re-use a component on the same page. Namespacing won't help here either; so even though my elements are 开发者_运维问答'unique' within the context of that component, they are not guaranteed to be within the entire document.

Using classes might be bad practice, but what other option is there?

use ID's if it's unique, use classes if it's reused

An example of using an ID that isn't a "bit bad"

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

Chances are, these are only going to be on the page once

Example of using classes

<div class="floatleft"></div>

<div class="bold"></div>

<div class="center"></div>

These are generic and can be used in multiple cases, even together! <div class="floatleft bold center"></div>

Using id's to identify elements is often considered a bit bad, because id's are global and it would instantly mess up if I happen to have a collision.

I dont think I agree with that. The entire point of an id is to (uniquely) id an element. Yes there could be problems if there are collisions, thats why you need to be careful and ensure that your IDs are unique. JS frameworks like Sencha and Sproutcore do this for you.

It is NOT ok to use classes in place of ids. The point of css classes is to be able to apply a set of stylings to all elements of the class. Classes are meant to be applied to multiple elements.

You can use classes so long as you don't expect them to be unique. If you do expect elements to be unique you should not fear using IDs.

As you're creating a Javascript application, you could save pointers to created elements in the DOM, without having to access them by IDs:

var el = document.createElement('div');
document.body.appendChild(el);

// now you can manipulate el as you want
el.style.backgroundColor = ...;
el.innerHTML = ...; 

I definitely don't agree with your statement at all (as with most blanket statements in general).

Using Ids is perfect when you have something that needs to be uniquely identified. That's what they're there for.

If you have other elements that need to be grouped somehow, and referencing them by their structure or tag won't work...then I would fall back on using classes.

Sometimes IDs are required, e.g., when using a <label for="MyID"> tag.