Is there any pros and cons if i use always CSS Class instead CSS ID for everything?

Question

In CSS we can use both ID and class. is there any pros and cons if i use Class always instead ID in terms of Semantic, Web standards- W3C , SEO , Accessibility and future maintainability?

Answer 1

My biggest one would be from the future maintenance point of view. Not only is it nice to know that a style is only used for one element on a page, but if you ever start integrated javascript into your page its nice to be able to access elements quickly using their IDs rather than try and access them by their class's.

Answer 2

If you're using a decent javascript library (like prototype or jQuery) then no, I can't think of any technical reasons why this would matter. However, it might help your own internal thinking and consistency to think separately about whether it is an attribute-like collective characteristic (=> class) or a specific item (=> ID).

Answer 3

Use id when an element is unique on a page and you always expect it to be. Use class when multiple elements will be assigned the value of the attribute. It's true that it may not make a big difference from a purely CSS perspective, but from the JavaScript or Selenium perspective, it's a big deal to be able to uniquely identify elements by their id attribute.

Answer 4

See following:
http://stackoverflow.com/questions/298607/css-best-practice-about-id-and-class

For SEO: It will make absolutely no difference to seo at all.

You should choose names that reflect the semantic content of that section. eg: id="leftMenu" class="footerNotes"

Don't use any underscores in your class and id names (common mistake).

Answer 5

One big difference: in CSS, a class has a lower importance level than an ID.

Imagine that each specification in a CSS declaration added a certain number of points to that declaration's value. Let's say the points go something like this (totally made up, but whatever):

• Tag name ('a', 'div', 'span'): 1 point
• Class name ('.highlight', '.error', '.animal'): 10 points
• ID ('#main-headline', '#nav', '#content'): 100 points

So, the following declarations:

a {
    color: #00f;
}

.highlight a {
    color: #0f0;
}

#nav .highlight a {
    color: #f00;
}

are worth 1, 11, and 111 points (respectively). For a given tag, the declaration with the highest number of points that matches it "wins". So for example, with those declarations, all a tags will be blue, unless they're inside an element with the "highlight" class, in which case they'll be green, unless that element is inside the element with id="nav", in which case they'll be red.

Now, you can get yourself into tricky situations if you're only using classes. Let's say you want to make all the links in your content area blue, but all the links in your foo area red:

.content a {
    color: #00f;
}

.foo a {
    color: #f00;
}

By my previous (made up) scale, those both have 11 points. If you have a foo within your content, which one wins? In this situation, foo wins because it comes after. Now, maybe that's what you want, but that's just lucky. If you change your mind later, and want content to win, you have to change their order, and depending on the order of declarations in a CSS file is A Bad Idea. Now if, instead, you had the following declaration:

#content a {
    color: #00f;
}

.foo a {
    color: #f00;
}

Content would always win, because that declaration has a value of 101 (beating foo's 11). No matter what order they come in, the content declaration will always beat the foo one. This provides you with some very important consistency. The winners won't arbitrarily change based on changing orders in the file, and if you want to change the the winner, you have to change the declarations (maybe add a #content in front of the .foo declaration, so it will have 111 points).

So basically, the differences in values are important, and you get a lot of inconsistency and seemingly arbitrary winners if you just use classes.

Answer 6

IDs are good for elements that need to be accessed from JavaScript. But the IDs must be unique in the page according to w3 standards, that is:

• you cannot have two <div id="Header"> in one document
• you cannot have a <div id="Header"> and <p id="Header"> in one document

Class names are good for elements that do not need to be accessed from JavaScript (although it is possible to do so). One class name can be used for multiple elements, and one element can have more than one class names attached to it. Class names therefore allow you to create more "generic" css definitions, for example:

• <div class="column">
• <div class="column left-column">
• <div class="column right-column"> -- all three can be in the same document

You can mix IDs and classes together.

To summarize: use IDs for specific cases; class names for generic cases; and cascad classes for elements that share some general properties but not all.

Answer 7

I know i'm not the 'norm' here and i'll get thumbed down for this... but i use class'es exclusively and only ever use ID's for scripting :)

This creates a clear line of seperation of designer and coder related tweaks and changes, which is very handy for us!.

Also we have some .NET web form coders (even though we are moving all sites to MVC) and as .NET controls take over ID's to script them dynamically using ID's for CSS is a pain... i'm not a fan of using #ct00_ct02_MyControlName in css files and even if i was changes to code can break the CSS! Classes works GREAT for this.

Some PHP libs others in the company are using also need to use dynamic ID assignment, this creates the problem here too. again Classes work GREAT here.

As more and more of these dynamic outputs and languages use up the ID's (for exactly what they are really intended for... identifiing an element to work with it) it can be more and more of a pain to work with IDs in CSS.

It's seems to me that everyone wants to use them simply cause they think they should, becuase they are 'there', i offer the idea that ID's are not there at all for CSS and their use in CSS is just there as an extra helper via the selector and their real use is scripting.

There has not been a single instance where i needed an ID for css use or even a single instance where it would have been eaiser.

But perhaps i'm just used to it and thats why? My HTML output is small, my CSS files small and direct. Nested elements work in all browsers as i expect, i dont have issues and can create complicated nicely rendered pages. Changes take mere minutes as i can apply multiple classes to an element or make a new one.

ID's for scripting, CLASS for css... works a treat.

Obivously there is no major issue (Even in a team of designers and coders) in using them both for css as we all get used to what we get used to :) but the way we work it outputs the expected results fast, and noone can step on anyones toes even in anonomous sharing enviroments.