Just to re-iterate what’s been said and to expand on it slightly:
There are two reasons to use ID’s instead of classes – the first was mentioned by Dresden_Pheonix, using it to hook to something with javascript using the “document.getElementById” method. The other which has not been mentioned is that it is also a replacement for “named anchors” which are links internal to a document accessed via a hash… For example we have this link:
<a href=“mypage.html#content”>Go to Content</a>
Old school if you had in mypage.html the following:
<a name=“content”></a>
Following the above link would load mypage.html and scroll down to that anchor. Nowadays we don’t have to waste an anchor on that as ID’s perform the same function.
<div id=“content”>
Can also be accessed as mypage.html#content.
This is why ID’s are supposed to be unique – as it’s a target for a single action be it javascript or hash.
Classes generally can’t be targeted (though that’s SLOWLY changing) by scripting directly but you can use them as much as you like. Classes exist SOLELY for the purpose of applying style to elements.
When Ralph talks about using them less – well, there’s a great example and it relates to the use of DIV as well. You will see code like this all the time:
<div id="nav">
<ul class="navList">
<li class="navItem">
<a href="/home" class="navAnchor">Home</a>
</li>
<li class="navItem">
<a href="/forums" class="navAnchor">Forums</a>
</li>
<li class="navItem">
<a href="/links" class="navAnchor">Links</a>
</li>
</ul>
</div>
Which is 100% grade A pure idiocy. NONE of those classes are neccessary, and even the DIV around it 99.99% of the time is wasted code. UL is a perfectly good semantic block level container, you don’t need to put a DIV around it. When all the elements of a certain tag type get the same class inside a parent element with a class or ID on it, you don’t need the class… I’m also not wild about “nav” – all links on a page are navigation, it doesn’t say WHICH nav it is.
99.99% of the time this code can be made functionally identical:
<ul id="mainMenu">
<li>
<a href="/home">Home</a>
</li><li>
<a href="/forums">Forums</a>
</li><li>
<a href="/links">Links</a>
</li>
</ul>
Anything applied to #nav and .navList being applied to #mainMenu. For the rest of those classes:
“#mainManu li” == “.navItem”
“#mainMenu a” == “.navAnchor”
You see that type of garbage code all the time – look no further than wordpress for examples of it in action with their “cat-item” class; Wordpress’ developers not knowing enough HTML or CSS to code their way out of a piss soaked paper bag… It’s the same as their abusing/misusing/just wasting code on title attributes that are identical to the contents of the anchor it’s on.
Using DIV when you don’t have to is often called “divvitus” – extra classes or ID’s when not needed I’ve taken to calling “Not every ejaculation deserves a name” (Borrowing from George Carlin). Classes and ID’s should be used when the tag is DIFFERENT from it’s siblings and/or children. If all the tags inside a parent element with a class or id are recieving the same style, you don’t need a class or ID on those child elements!
You see it out of old-school coders with tables too – you’ll often see nonsensical rubbish like:
<table class="myTable" cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="4" class="tableTitle">Title</td>
</tr><tr>
<td class="emtpyCell"> </td>
<td align="center" class="columnTitle"><b>Col 1</b></td>
<td align="center" class="columnTitle"><b>Col 2</b></td>
<td align="center" class="columnTitle"><b>Col 3</b></td>
</tr><tr>
<td align="right" class="rowTitle"><b>Row 1</b></td>
<td class="data">Data 1-1</td>
<td class="data">Data 1-2</td>
<td class="data">Data 1-3</td>
</tr><tr>
<td align="right" class="rowTitle"><b>Row 2</b></td>
<td class="data">Data 2-1</td>
<td class="data">Data 2-2</td>
<td class="data">Data 2-3</td>
</tr><tr>
<td align="right" class="rowTitle"><b>Row 3</b></td>
<td class="data">Data 3-1</td>
<td class="data">Data 3-2</td>
<td class="data">Data 3-3</td>
</tr>
</table>
All because the coders are unaware of the TH, CAPTION, THEAD and TBODY elements – none of the classes except .myTable is neccessary, the COLSPAN is unnecessary, and all the align attributes have no business in the markup either after we kicked nyetscape 4 to the curb circa 2002-2003ish. Even some of the properties like cellpadding aren’t needed when set to zero as that can be handled by border-collapse:collapse; while even the non-breaking space to force the TD to show isn’t needed if you set empty-cells:show;
PROPERLY written “modern” style that should be:
<table class="myTable">
<caption>Title</caption>
<thead>
<tr>
<td></td>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>Row 1</th>
<td>Data 1-1</td>
<td>Data 1-2</td>
<td>Data 1-3</td>
</tr><tr>
<th>Row 2</th>
<td>Data 2-1</td>
<td>Data 2-2</td>
<td>Data 2-3</td>
</tr><tr>
<th>Row 3</th>
<td>Data 3-1</td>
<td>Data 3-2</td>
<td>Data 3-3</td>
</tr>
</tbody>
</table>
.myTable caption == .tableTitle
.myTable thead td == .emptyCell
.myTable thead th == .columnTitle
.myTable tbody th == .rowTitle
.myTable tbody td == .data
The handful of extra characters declaring it in the CSS is more than made up for by using HALF the HTML and that if you use that same style across multiple pages on a site, the CSS is cached.
Basically, reserve classes for when something is recieving DIFFERENT styling from it’s siblings or it’s children are different.
(When Mozart was told his music had too many notes, he said that there were just as many as were needed.)