HTML & CSS - When to use id vs class

**smoseley** · Oct 10th, 2007, 05:20 PM

Ok, so I've been using ID attributes more and more in my HTML.

I've gotten to the point where I'll ID any div that is unique and needs to be styled... whether or not it is something that needs to be referenced by javascript.

I'll typically do stuff like this:

Code:

<body>
    <div id="wrapper">
        <div id="page">
            <div id="header">
                <div id="logo"></div>
                <div id="menu"></div>
            </div>
            <div id="main">
                <div id="left">
                    <div class="block">
                        <div class="blockHeader">
                        </div>
                        <div class="blockBody">
                        </div>
                        <div class="blockFooter">
                        </div>
                    </div>
                </div>
                <div id="right">
                    <div id="content">
                    </div>
                </div>
            </div>
            <div id="footer">
            </div>
        </div>
    </div>
</body>

My issue is that I'm not sure all of the ID'ed elements things should be ID'ed. Are there any standards you guys use to determine what's an ID and what's a CLASS, other than whether it will be repeated?

The reason this came up is because I was considering adding some AJAX functionality to a site today and I was considering using DOM to append to an element... so then I was thinking, "do I really want the style of that element to depend on its id?"

For example, let's say I want to do something like this:

Code:

<body>
    <table id="merchantList" class="list">
    </table>
</body>

Well now I've got the element styled by its class and referenced by its id. That's how it should be.

But what if I want to add dynamism to other elements?

What I'm beginning to think is that element identifiers like "header", "footer", "left", and "right" should be classes, because it's feasible (even though very unlikely) that they could be repeated and have unique ID'ed instances thereof, such as <div class="header" id="mainHeader"> (for whatever odd reason).

Anyone else thinking the same thing?

**Web Design Forums** · Oct 10th, 2007 05:20 PM

**mlseim** · Oct 11th, 2007, 06:00 AM

Steven ...
sort of funny, seems like none of us (including me) really know how
to properly use them. I just do whatever works, which is probably
not correct.

**bfsog** · Oct 11th, 2007, 08:18 AM

I do not really have any specific pattern I follow when giving elements classes or ID's, although I do prefer to give divs a class or ID just so looking through it's source I can see it's purpose.

**Shadowfiend** · Oct 11th, 2007, 08:47 AM

I always think about IDs a bit. They do, after all, imply identity. Take header, for instance. header would probably be a class, but page_header (or pageHeader or whatever) would probably be an id. Still, the likelihood that you'd want to do something with every header in the page seems low. So with classes, I typically avoid setting a class unless I know I'll be needing that group for something. Sometimes I'm more liberal with my ids (i.e., I put them on something I think I might need in the future).

It's a tough question, but I think it's largely a matter of how your organizational style works. The advantage is that with modern Javascript frameworks, your classes are useful in the Javascript world, too, which makes them even more useful.

**Bulletz** · Oct 11th, 2007, 09:53 AM

I pretty much agree with Shadowfiend's explanation on this. Since they are almost interchangeable now with regards to Javascript ect., my usage of classes and IDs is governed almost solely by what they are actually really saying, i.e.:

<div id="pageHeader"></div>
... says that the <div> is the pageHeader. whereas,

<div class="header"></div>
...says that the <div> is a header.

Or in other words, the id attribute identifies an element unique to the page, whereas the class attribute classifies an element.

**Steax** · Oct 11th, 2007, 04:30 PM

One thing I commonly need to consider is about specificity. Remember that an ID has 10 times (if I'm not mistaken) the specificity of a class.

Second, there are problems with some JS I've seen if IDs are used multiple times - although this could just be a problem with the library, perhaps.

**Shadowfiend** · Oct 11th, 2007, 04:41 PM

No, ids are supposed to be unique, which is why there are issues with those and Javascript. Typically, lookups are usually probably done in a hash table, which means lookups are very very fast. Thus, a lot of libraries just short-circuit any selector involving an id selector to a document.getElementById call as an important optimization.

**wooddoor** · Oct 11th, 2007, 07:57 PM

Or in other words, the id attribute identifies an element unique to the page, whereas the class attribute classifies an element. Well said Bulletz!

Not to beat a dead horse here but what would be better specificaly for a, ul, etc in a nav. For example if I want the text in a the #header Div to have all links be a particular color other than the other navs, should I.....

Use #header a or assign a class like .headera

I am only a copy and paste js guy so anything specific to the relationship with js is really what I am interested in.

**Shani** · Oct 12th, 2007, 08:05 AM

I have actually thought about this quite a bit recently.

I tend to think of my attributes in terms of the site, not the page. It kind of follows what everyone is saying about generic vs. specific.

The best illustration of what I mean is in navigation. There's a top level [minicode]mainNav[/minicode], and for some of those, there is a [minicode]subNav[/minicode].

HTML Code:

<ul id="mainNav">
  <li id="home">home</li>
  <li id="contact">contact
      <ul class="subNav">
        <li>Marketing</li>
        <li>Tech Support</li>
        <li>Event Coordinator</li>
      </ul>
   </li>
 </ul>

IDs go to the parts that do not change anywhere on the site. Why do them on each [minicode]li[/minicode]? In case you want to do something specific for the whole list. By having the class on the nested [minicode]ul[/minicode], you still have flexibility to affect every subNav in both the DOM and CSS.

**ljm** · Oct 14th, 2007, 06:24 AM

I just use classes for everything, really. Only time I'll use an ID is if I'm using Javascript, or anything else that relies on an ID attribute. If nothing needs to be identified by the script, I don't use an ID.

Thread: HTML & CSS - When to use id vs class

LinkBack

Thread Tools

Search Thread

Display

Remove Ads

Posting Permissions