CSS Best Practice about ID and Class?

Question

I've been dipping into SitePoint book concerning CSS.

The thing that struck me about the examples was the use of ID as a CSS selector.

Some bits of CSS design I've done, I've always found it easier and more versatile to use Class as the selector.

Maybe its a .Net thing as we don't always have control of the ID of an element...

Is the best practice here to use CLASS or ID as the selector?

Answer 1

I prefer to use Class as the selector, so I can use it with more than one element at the same page. Using the id as the selector, does not allow this, since the id must be unique.

Answer 2

I guess they always use the id in examples because it's less ambiguous. You know that they're talking specifically about that one element and its styles.

In general, the rule of thumb is that you should ask yourself: "is there more than one element which requires the same style, now or at any time in the future?", and the answer is even "maybe", then make it a class.

Answer 3

ID selectors have a high specificity, which is often what you need in CSS. The tighter you can get the CSS to apply to exactly what it needs to the less work the CSS renderer has to do in establishing rules.

Design to task, and do so in an OO manner - use classes where the objects are classlike, IDs where you mean to target instances, and treat tag refs as something like interfaces (and beware when you do so!). That's the best practice I can think of.

edit: and yeah MS really shafted CSS with ASP.NET thanks guys!

Answer 4

The practice depends on the 'resolution' of what you're trying to select.

I use classes when I want to change a whole swag of elements. IDs give me a much more fine-grained control which is sometimes necessary.

Answer 5

You should use an "id" when you're always talking about a single (and will always be single) seciton of your site.

Basically, it comes down to semantics.

div.header

That's tells me that you allow multiple "headers" in your site. Perhaps these are sub headers.

div#header

That tells me that you're talking about the single "header section" of your site layout.

EDIT: Here's a semi-old article about a Pure CSS design... if you just scan the CSS examples, you'll see why I use ID's in there: How To: Pure CSS Design

Answer 6

Don't forget that class and ID are not mutually exclusive. There is nothing to stop you from having both! This is sometimes very useful as it allows an item to inherit common styling along with other elements of the same class as well as giving you precise control of that specific item. Another handy technique is to apply multiple classes to the same object (yes, class="someClass someOtherClass" is perfectly valid) For example:

<style>
div.box {
float: left;
border: 1px solid blue;
padding: 1em;
}

div.wide {
width: 40em; 
}

div.narrow {
width: 10em; 
}

div#oddOneOut {
float: right;
}
</style>

<div class="box wide">a wide box</div>
<div class="box narrow">a narrow box</div>
<div class="box wide" id="oddOneOut">an odd box</div>

In theory it is also possible to get CSS to only apply to items that belong to several classes, e.g. div.box.narrow {something: somevalue;} but unfortunately this is not supported in all browsers.

Answer 7

Don't forget that you can link to an element that has an ID. This can be very important for accessibility, among the other benefits. This is a good reason why for layout elements like header, navigation, main content, footer, search form and so on, you should always use an ID instead of a Class (or together with a Class).

Answer 8

IDs are for uniquely identifying elements, Classes are for identifying an element as being part of a class of elements.

In practical terms, id attributes should only be used one per document, class attributes can be used on more than one element on a document.

Check the W3C spec and also the CSS-Discuss page on this issue.

Answer 9

Another useful resource is the W3C spec on Cascading Order: id selectors are given ten times the weight of class selectors. This is especially important if you plan to override styles depending on different scenarios or state changes. The more specific the initial selector, the more work you have to do to override it in additional declarations.

Answer 10

Use only classes, almost never use IDs if you don't have to worry about speed or compatibility.

Using IDs is bad just like using global variables in Visual Basic code. The reason is that IDs have to be unique which introduces unnecessary and bad dependency between different independent parts of your code. Using something like .page1 .tab1>.field1 is better because you don't have to worry about uniqueness of field1 inside tab1 or uniqueness of tab1 inside page1. With IDs you have to keep registry of your IDs to keep control and avoid collisions.

Use IDs only if you have to, for example href='#name' or if some library requires you to.