Question

Is there any negative to using only classes in HTML as opposed to ids and classes? (meaning that even if an element occurs once, it is still given a class rather than an id)

EDIT – How severe is the performance hit when using JavaScript with classes as opposed to ids?

Answer 1

JavaScript

For JavaScript, IDs provide a fast and deterministic way to select one and only one element. Selection by class (e.g. using a library like jQuery) can be useful e.g. “do this to all elements with class name XYZ”.

Performance

How severe is the performance hit when using JavaScript with classes
as opposed to ids?

Try it and see: http://jsperf.com/class-versus-id. In Chrome, I’m seeing varying differences (5%-40% slower to use class name). Note that getElementsByClassName is not universally supported (John Resig has a comparison of custom implmentations).

CSS

From a CSS perspective I use IDs sparingly and only when I know there will ever be one match (since IDs must be unique).

However, I think the question neglects one of the most important abilities of CSS: the ability to use structural selectors. Without these selectors combined with classes (and sometimes IDs), you risk having much more brittle and verbose CSS.

Complex selectors can also be extremely useful in JavaScript when implemented in an engine like Sizzle.

In other words, every element should probably not have an ID and/or class explicitly assigned to it.

Consider:

.foo .bar1 { }
.foo .bar2 { }
#bar3 { }

Versus:

.foo > SECTION { }
.foo > SECTION + SECTION { }
.foo:last-child { }

SECTION H2 { }
P + P { margin-top: 1em; }
/* etc */

In the first example, everything must be explicitly ID’d or have a class stated. The second examples rely more on document structure.

Ultimately the goal should be maintainable code first while achieving the cleanest markup possible.