Why not always use .Classes in CSS and skip #IDs alltogether?
Asked by
makemo (
531
)
April 20th, 2008
If ID and Class means the same thing, with the exception that IDs can only target one element, whereas Classes can be used in multiple instances throughout the code:
Why not just use Classes all the time?
Of course, the one thing to pay attention to, would be to keep track on the elements having the same Class, for obvious reasons, but isn’t the extra effort keeping that in mind kind of worth it, rather than using IDs and then realize tha you want to use that same declaration on multiple elements, ultimately being forced to change the attribute from ID to Class anyway…
I’m a bit confused about this, and would like to hear some opinions, or, if somebody could point me to some place where this is being discussed in detail. I’d be curious to know, are there different ‘schools’ in this regard? I tend to believe that I’m better off using Classes as attributes for all my declarations (except for the standard elements, of course).
Thanks,
-Makemo
Observing members:
0
Composing members:
0
4 Answers
IDs allow you to identify a unique element whereas classes are used for specifying just that, classes of elements. Its an important distinction but I can see how it might seem that it isn’t needed. Personally I find useful for organizing your layouts. It is also very useful for targeting specific elements via JavaScript that require updating without reloading the page as this facility is built into all browsers via getElementById(). Of course there is nothing stopping you from just using classes but then again there’s nothing stopping you from using tables and images for your layouts either.
I think its best to remember that CSS is a way of describing the style of HTML and that the two are not necessarily linked as closely as you might think. All CSS does is provide ways to select various portions of HTML for you to modify visually. With HTML, you can specify IDs and classes on elements for reasons other than styling – its a bit like metadata. HTML is just a way of defining a document and properties about portions of it. CSS is effectively an optional layer (but obviously a totally ubiquitous one). If you check out some of the more advanced selectors in CSS you’ll find that it goes way beyond classes and IDs.
There are few things I could add after the great answer by paulc…
I usually use IDs for the big structural elements on a page, such as “header”, “footer”, “sidebar”, “content”, “comments”... I know I will only find one of those elements on any given page inside a site, and they allow me to create internal navigation links… years ago, you could use the “name” attribute to create an internal anchor inside a page (for instance, if you opened a link to my_latest_post.hml#comments you could go directly to the comments section of that page), now IDs do the same thing, with the exception that “name” could only be applied to links (<a />) and IDs can be applied to any element… and adding a internal anchor navigation to a page can be a great accessibility feature (if done correctly, of course)
I often assign classes and IDs to objects, so that I can style the whole group of elements with the class definition in CSS, and then manipulate specific elements via ID with JavaScript for “special effects.” Best of both worlds.
These are all great answers. Another thing to keep in mind is that IDs are given a higher priority than classes in the cascade.
Answer this question 
This question is in the General Section. Responses must be helpful and on-topic.
Composing members:
0
