views:

430

answers:

13

I've always used the class attribute, never id for the purpose of CSS selecting and styling. I know that the id must be unique, but that doesn't seem to be a reason to use it for CSS.

The only reason I have used the id attribute is for JavaScript and form labelling.

I find mixing id and class for the purpose of CSS can cause confusion, and for me it's a good way to force separation of style and behaviour.

Is there a good reason to use id for CSS purposes? Is there anything that can be achieved with id that can't be done with class?

Comments I found useful/interesting

  • You could say the same thing about classes. There's lots of JavaScript out there that does (and must) target elements of a specific class. Changing the class in those instances is just as problematic from a behavior standpoint. - AaronSieb
  • IDs have different specificity in the cascade than classes. - Killroy
  • Using ID for styling makes sense if it's an element that doesn't have duplicate, especially if it's something that shows up in all/most pages - RichN
+1  A: 

If you have multiple elements of the same class and need to specify a different style for one or more of them that'd seem pretty valid to me.

Azeem.Butt
This is why you can attach multiple CSS classes to an object, though.
JMP
Why not use multiple classes? class='genericClass specificClass' etc.
Rew
Why not use inline styles? Why not use font tags?
Azeem.Butt
multiple classes are not fully supported by all common browsers yet. Also, IDs have different specificity in the cascade then classes.
Killroy
+8  A: 

No, but if your element has an id why not use it for styling?

You could say the same thing about element names - there's nothing you can do with p that you couldn't do with class='paragraph'. That doesn't mean it's a good idea to add class='paragraph' to every <p> element.

Dominic Rodger
Any particular reason that this has been getting downvotes? Do you disagree? If so, why?
Dominic Rodger
I haven't voted on it (can't down-vote anyway), but to be honest, I don't really see your point :-) I use IDs for JavaScript, I could use that same ID for CSS, but I find that mixes style and behaviour which I prefer to keep separate to avoid issues in future (removal of ID means the styling goes away too).
Rew
My point is - if your element has an ID already, and there you want that particular element to have a style - why add a class? There's already a way to style it.
Dominic Rodger
@Rew You could say the same thing about classes. There's lots of JavaScript out there that does (and must) target elements of a specific class. Changing the class in those instances is just as problematic from a behavior standpoint.
AaronSieb
Eh, I'm getting down-vote stormed, too. Lots of opinions and most of them have nothing to do with the OP's question. /shrug
JMP
@AaronSieb - that's a very valid point! :-)
Rew
A: 

IMO, using ID-based styles is a bad idea.

IDs, being unique, should only occur up-to 1 time within your DOM. This limits the use of any ID-related style to up-to 1 time.

CSS classes, on the other hand, can be used multiple times or not at all.

Frankly, I think ID should be used for behavior, and class should be used for style. The fact that you can use them interchangeably is part of what makes some aspects of web development inconsistent.

JMP
Yes - but one time in every document that references your stylesheet. Still worth adding a style for IMHO. I always do styles on IDs for components of pages that I know there are just one of. That's what IDs are for.
Dominic Rodger
I think the OP is trying to understand why you would use one over the other. Sure, you _can_ define a style by ID, but it limits the scope in which that style is available. This is why I think it's a poor design, I can't think of a scenario where I feel like I need to seal a style like that.
JMP
Why do you think there are different needs for behaviour and styling? Aren't methods of selection independent of what you do with them? If you have ever used jQuery you will see that classes are very useful for behaviour. Like flash all images or scale all paragraphs. For example there is a common technique to have menu selected-ness as part of the CSS by applying an id to the body tag and cross referencing it to a class on a menu item.
Killroy
So JM you're basically saying I must use <div id="foo" class="bar"></div> because using <div id="foo"></div> and then styling #foo{} is a bad idea? Do you really think redundant markup is a great idea?
squeeks
@JM - RichN's answer (http://stackoverflow.com/questions/1607839/is-there-any-valid-reason-to-use-the-id-attribute-for-css-purposes/1607961#1607961) has excellent examples when you might want to do this.
Dominic Rodger
@Killroy, squeeks. As I mentioned, I don't like to seal off my styles. ID is an awesome, fast selector and class is useful for pinpointing the element(s) you want to act on. Won't you agree that styles can often be interpreted as behavior? Why not separate the ID from the style so as to improve readability?
JMP
How many other elements do you think I'll want to give the exact same appearance and positioning as my top navbar? There's no reason why "ID should be used for behavior." That's a baseless opinion.
Chuck
Why is it that "designers" who invent and espouse these arbitrary little rules with no basis in reality always have such unattractive websites?
Azeem.Butt
+10  A: 

Selecting anything with a unique id is faster than selecting with a class. The difference is negligible, but in applications with huge amounts of DOM elements, or intensive Javascript application, it makes a difference.

For example if you are using jQuery check this out: jquery performance rules

ohdeargod
I don't have a problem with using ids for JavaScript, I just don't know why people use them for CSS styling.
Rew
Well even with css you have some issues, for example IE6 has trouble with 2 css classes on the same element. If you have an element with class="test hidden", and you have a css selector of test.hidden, a bug appears in IE6 in which it has trouble selecting the element.
ohdeargod
I stopped worrying about IE6 a long time ago :-) For the sites I run I just don't get enough traffic from IE6 users.
Rew
+1, That 'JQuery performance rules' link is very useful.
Rew
Upvoted this, then realised you're talking about javascript. Selecting an element with a unique ID is also faster in CSS! In other words, the browser can find and render the element quicker.
DisgruntledGoat
+19  A: 

Using ID for styling makes sense if it's an element that doesn't have duplicate, especially if it's something that shows up in all/most pages.

E.g.:

  • Page header & footer
  • Search box (the thing you can see up there)
  • Navigation list (something like the thing on the right)
RichN
+1 - exactly my view, and better expressed than mine :-)
Dominic Rodger
I'd add the caveat, "assuming that it would never make sense for this element to appear more than once", as opposed to "just doesn't happen to appear more than once in any example I've come up with so far". So like a page header? Yes. Ad box, because right now I only have one customer who's bought an ad? No.
Jay
+4  A: 

You don't HAVE to use IDs. There is no design that you can create using IDs that you can't create using classes.

With that said, using an ID has the advantage of clearly labeling a selector as applying to exactly one element in a page. I typically use them for styling elements in my page templates (#Content, #Navigation, etc.).

In general, I would try to use it in areas that allow me to make the markup more concise. When a selector can be targeted at a tag, you should use the tag. When it can be targeted at an ID, use the ID. Otherwise, use a class.

But, again, whether or not you use IDs isn't terribly important.

AaronSieb
A: 

I use a id when i know im going to use javascript on that specific element. ID's are much faster then classes in javascript.

Wieringen
+3  A: 

I tend to think of the relationship of id and class in HTML as analogous to object-oriented programming: an id is like an instance of a class.

I use classes more than I use ids, and often use multi-class selectors (e.g. .film.drama). But if I do want to identify a particular element, so that I can apply specific styling or behaviour, then I'll assign an id, and often a class as well. E.g.

<ul>
    <li class="film drama">A</li>
    <li class="book drama">B</li>
    <li class="film documentary" id="film-9832">C</li>
</ul>

In assigning an id, I think "could it ever make sense for there to be more than one of these on the page". If the answer is yes, then I'd probably go for a class instead.

As a result, and as @RichN and @AaronSieb have mentioned, I often use id's for specific page elements that are certain to be present only once on the page:

<ul class="sidebar" id="site-meta">[...]</ul>
Premasagar
+1 - I like the example you gave.
Rew
+4  A: 

IDs identify, classes classify. This point has been mentioned several times here, more or less.

An example would be:

<div class="author" id="stephen">[...]</div>

From a CSS specificity standpoint, targeting IDs will make CSS rules more specific than rules with classes, even several classes.

Thus:

p#recent {}

is more specific than

body>p.news.recent {}

and when a user agent finds both of these, the first will prevail.

stephenhay
+1  A: 

The only thing I can think of to use an ID is if you have a specificity war - two elements with the same specificity. Applying an ID will give your element a higher specificity - +100 to be exact.

So, in the case where you have two styles defined with equal specificity, you may want to 'clobber' one by applying a higher specificity to the other. That being said, you can achieve the same by applying a more specific class to that selector too, which would increase the specificity by 10.

ID = 100 (#foo) class = 10 (.bar) element = 1 (div)

steve_c
+2  A: 

The main reason I use ID tags is to communicate with people who are reading my code. Specifically, the ID tag makes it easy to reference whatever specific element they want to with complete peace of mind, knowing that any changes they make to it will only affect that one element.

EDIT: There is also a more technical reason to use ID tags that you may not know. I just saw it explained in another question on SO by a user named Bart who pointed to this article. To quote Bart:

This is a pretty good article that can help to clear up the root cause of some CSS conflicts. The formula that this site talks about really opened my eyes when I first discovered it (the formula, not the article).

Basically, you add up a "score" for each rule in your CSS. The rule with the highest score wins and gets to style the element.

  • Each ID is worth 100
  • Each CLASS is worth 10
  • Each ELEMENT is worth 1
html body{font-size: 80%;} /* worth 2 */
body{font-size: 70%;} /* worth 1 */
body#body-id{font-size: 50%;} /* worth 101 */
body.body-class{font-size: 90%;} /* worth 11 */
#body-id{font-size: 60%;} /* worth 100 */

The font-size of the body would be 50%.

When I read this, I couldn't believe that I had never heard of these rules, as they could potentially change a site's look and layout significantly. Knowing of them now makes the cascading nature of CSS much more apparent.

sfarbota
A: 

I personally prefer to use ID's for static page elements (headers, footers). Reason being page weight.

id="h" is lighter than class="h".

Every byte counts in my opinion.

Jeremy
A: 

The main reason why I use ids in CSS is for layout. If I have one header and footer, then:

#header
{
...
...
...
}

#footer
{
...
...
...
}

Or one wrapper for my main content, or one right sidebar. If someone decides they like my layout and want to view source, it's easy to see.

tahdhaze09