Class vs. ID

[johnnyk]

I've always used classes for everything, but I read that you should use and ID if you're only going to use it once. Is there really any benefit to using an ID (considering it would work with a class also).

[moberemk]

IDs have a higher specificity rating, making them overrulling over classes. So when you give something a class and an ID, the ID's rules come first.

[Daniel0]

I believe IDs have to be unique in order to have valid XHTML (possibly HTML too). So imagine a forum system, where each post row has an ID called 'postrow', that would not make the ID unique, so you'd have to use the classes instead.

[ShogunWarrior]

ID are good/neccessary when: parsing, using Javascript, CSS stuff etc.

For instance to highlight a row you'd need the ID of that table row.

Also, it is better for styling, like:
[code]
<tr>
<td class="box" id="left"> </td>
<td class="box" id="center"></td>
<td class="box" id="right"></td>
</tr>
[/code]

Because you've used class and id you can now assign all the boxes styles, and then tweak each specific one.

[Daniel0]

Yeah, but according to W3C all ids have to be unique in order to be valid XHTML:[quote]An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).[/quote]

So you could just use an id attribute on things you know you will be using javascript on.

[WendyLady]

Hmmmm -- I'm surprised no one has said this before:

A class definition can be used many times on a single page -- for example, a paragraph or a span can have the class [b].bold[/b] and this can be used throughout the page, many times.  It is typically a more general style.

An ID definition is more restrictive, and each ID should only appear once on a page.  An example of this is #submenu --> or using the id="current" for navigation, to show which page a person is on.  There is only going to be one submenu on the page with this style, or only one tab can be "current".  If you use IDs multiple times, you can get interesting results in different browsers.

Introduction to IDs vs. Classes:
http://www.tizag.com/cssT/cssid.php

Uses the id="current" for navigation (classic tutorial):
http://alistapart.com/articles/slidingdoors/

Lots & Lots of General Help on CSS:
http://www.w3.org/Style/CSS/learning

[awesty]

so what is the point in using id's when you can only use them once when you could easily forget you have already used it and muck up ???

i alway use classes, but sometime use id's for no particular reason other than doing stuff differently :P

[moberemk]

[QUOTE]IDs have a higher specificity rating, making them overrulling over classes. So when you give something a class and an ID, the ID's rules come first.[/QUOTE]
Also, Javascript can only call ID's, unless you use the Prototype Library's dollar function.

[Daniel0]

[quote author=WendyLady link=topic=99592.msg394734#msg394734 date=1152565680]
Hmmmm -- I'm surprised no one has said this before
[/quote]

Look at the post above yours... ;)

[obsidian]

[quote author=ShogunWarrior link=topic=99592.msg394005#msg394005 date=1152457364]
For instance to highlight a row you'd need the ID of that table row.
[/quote]

no necessarily. there are many other ways to reference a specific object (by name, element, etc). however, using the getElementById() function is definitely the easiest way. in fact, you could use javascript to cycle through and pull all the rows on a page of a specific style if you wanted to as well. it would take a bit more coding, but it's possible.

all that to say, i think that the principles behind some of the posts above are the biggest benefits to you: keep in mind that if it's a major section of your page (header, content, navigation, footer, etc), you need to use an ID (for reasons mentioned above). But, on the other hand, if you are wanting to assign styles that may be used more than once, by all means, use a class so you can assign the attributes wherever you'd like. also, keep in mind that each element can have multiple classes, but only one ID as well.