CSS Class vs ID

Should I use class or ID to style when either option works?

I have been a back-end engineer for the past several years but I do dabble at front end stuff including CSS and Javascript. Today I am messing with my blog trying to style it better and this question hit me

To answer this question I need to understand the differences between a class and an ID. So I began searching on Google trying to find different perspectives on this issue. My original thought is this: I want to use class because an element can have one or more classes; whereas an element can only have one ID.

Here are some of the arguments and respective rebuttals I've put together:

Argument: ID is unique and is for unique elements of your page. This makes it easy to understand the semantics of your page.

Rebuttal: Let's clarify this argument. ID is unique in the DOM and you should use ID to style any unique section in your page, such as the top navigation, the menu bar, the top heading, the footer, etc. If what you want to style applies to multiple sections (e.g. you want to style <h1> the same way as <p>) then you use class. Then just by looking at the style sheet you'll be able to kind of know the structure of the document (e.g. .post is a class and therefore the document may contain multiple sections that are considered "posts"; #header is an ID and therefore the document has only one header).

This sounds like a logical point but after giving it iterations of thought I cannot find any support for it Indeed ID is unique in the document, but how many site owners follow this rule? If very few follow you wouldn't be able to understand the semantics of the majority of the sites just by looking at the usage of class vs id in the style sheet anyway.

Argument: An ID has higher specificity than a class.

Rebuttal: Yes, if there are multiple CSS declarations that match a particular tag, the CSS declaration that includes an ID probably has higher specificity and will override the other declarations. For example say you have <div id="id1" class="class1"> this is a paragraph</div> and in your style sheet you have #id {color:black} and .class1 {color:red}, then #id {color:black} will be picked. However I don't see how this fact plays in this discussion. Feel free to enlighten me will ya?

Argument: The choice you make will have an impact on microformat.

Rebuttal: How true. However we are discussing whether to use class or id to STYLE your HTML If you need to use one or the other due to conforming to microformat specs then it's a different story. However even so, you would use class instead of id, and sticking with class gets my vote.

Conclusion: ID should only be used to uniquely identify an element so that you can getElementById() successfully in Javascript. ID should not be used to style. Class, on the other hand, should be used to style. Ok fine.. there's one drawback to using class: It is 3 letters more than id and may add to your style sheet's size if you have a ton of CSS declarations

I took the Plunge

As noted before I hate MySpace but after being asked countless times by countless people I finally dove in and created a profile. Which as you can see from my icon that I'm quite into ponies. Since you need to be my friend to see it in full here's a screen shot of it to help visualize:


Pretty classy eh? I blatantly stole the idea from Slashdot's April Fools OMG!!! PONIES!!! makeover from 2006 and then used and modified the basic CSS layout from Mike Davidson. I used a little GIMP action to then pull the hearts of the OMG PONIES! image and created a 272x124 table image for the functionality links. Finally I changed the color scheme to use color code #d67bb4 for the wonderful pink color.

Now just because I have a myspace account doesn't mean that I've comprised any of my virtues I triumphed before. I only have friends of people I actually know well and I will not constantly use the site in lieu of something constructive with my time. Although I do have to admit it is fun to post comments on people's pages and keep people updated with what you're generally doing with your life.

In the future I will most like redo the theme again to something a little less "sissy", but I'm happy with it now and the reaction it garners is priceless.

Make sure you hover over all the links on the page too for little surprises...