Which method is better? CSS classes or ID's?

Question

Let's consider these 2 ways of writing the same code:

Method 1

<div id="header">
    <div id="user">
        <a id="userName">Username</a>
        <a id="userImage">Userimage</a>
    </div>
</div>

Method 2

<div id="header">
    <div class="user">
        <a class="name">Username</a>
        <a class="image">Userimage</a>
    </div>
</div>

CSS of Method 1

#userName { color: white; }
#userImage { height: 50px; width: 50px; }

CSS of Method 2

#header div.user a.name { color: white; }
#header div.user a.image { height: 50px; width: 50px; }

It seems to me that Method 2 is cleaner, since you will never end up with IDs like userImageInnerBox. Now technically speaking which is the best method and why?

Sounds like you're going for Subjective/Argumentative for no reason — random, Mar 02 '11 at 18:12
Duplicate of: http://stackoverflow.com/questions/1215618/what-is-the-difference-between-classes-and-ids-in-css-explain-me-with-example-of — random, Mar 02 '11 at 18:13
On a side-note, if you go for IDs, you can use them as "hash links" — Eric, Mar 02 '11 at 18:27

score 14 · Accepted Answer · edited Jun 02 '12 at 21:20

The golden rules goes as this: use id for chrome elements, use class for content elements. So method 2 is the better.

You can read this article on css-discuss for inspiration: http://css-discuss.incutio.com/wiki/Classes_Vs_Ids

There is nothing that stops you from using id attributes on unique content elements, and in some cases it can be a nice way to speed up javascript DOM traversals. For styling purposes, however, it is considered by many as bad practice.

The main points to consider are these:

classes can be used for multiple inheritance, id's needs to be unique
selector specificity can become a nightmare if you need to use inheritance paired with id styling

Whenever I use id attributes on non-chrome elements it is purely for fast javascript access, and never for styling.

What do you mean for "chrome" elements? Decoration elements? — Shoe, Mar 02 '11 at 18:01
Definition of chrome can be found here: http://stackoverflow.com/questions/5071905/what-does-chrome-mean/5072092#5072092 — Martin Jespersen, Mar 02 '11 at 18:03

score 2 · Answer 2 · answered Mar 02 '11 at 18:04

If you are sure you are only going to have one element on the page, you can use method 1.

I prefer method 2 because I always end up re-using my styles and I mainly use ID's for layout elements (header, footer, etc.).

I would try to limit the selector as much as possible though, so if I can address the .name like:

#header .name {
}

I would use that instead of your selector.

score 0 · Answer 3 · answered Mar 02 '11 at 17:59

0

Personally I find best method is second, that is the classes was created.

answered Mar 02 '11 at 17:59

methyl

3,272
2
25
34

2

Why? What are the cons and the pro? – Shoe Mar 02 '11 at 18:00
It's just cleaner, no technical difference. – methyl Mar 02 '11 at 18:04
How can something be cleaner without there being a technical difference? There has to be some reason for the cleanliness. – ggorlen Aug 04 '22 at 01:56

score 0 · Answer 4 · answered Mar 02 '11 at 18:04

I prefer a mix of both, the names of method 1, with class rather than ID.

Method two by itself is alright but I think it could lead to css bloat later down the road, especially if you intend to continue using generic classes like name and image for other elements.

score 0 · Answer 5 · answered Mar 02 '11 at 18:05

0

You should use ID's for unique elements and classes for elements you use more times. That is what you need, classes.

answered Mar 02 '11 at 18:05

Andrei Duma

717
7
10

score 0 · Answer 6 · answered Mar 02 '11 at 18:06

If there will only ever be one element user or userName then ID is better. The CSS selector for it will be more efficient. This will also be true if you need to select it for use in JavaScript.

Class should be used when there might be more than one element that should be styled the same way.

Which method is better? CSS classes or ID's?

6 Answers6

Linked