CSS – ID vs Class

After hacking apart & cleaning up code for the better part of the day, I’ve decided to set the record straight about CSS, IDs, and Classes. The question is “when should I use an ID, and when should I use a class?” Is it that big of a deal?

The big issue is that people who just write Cascading Style Sheets usually won’t run into problems if they are more lax with their use of IDs. Its the people after who coming in trying to add advanced JavaScript features that will end up becoming very, very frustrated.

Why does it matter? Because an ID and Class have one major difference:

ID is supose to be 100% unique to a single HTML element through the entire HTML document. Class can be shared among many elements.

Example:

<!-- This HTML element is using an ID -->
<p id="text">This is using an ID</p>

<!-- This HTML element is uing a class -->
<p class="text">This is using a class</p>

What is the big deal? For CSS designers, not a whole lot. In fact, IDs have a higher specificity, so some CSS designers default to using an ID just because it is more convenient. The problem is when your boss say “hey, we need two paragraphs.” The developer copies a new paragraph in and to keep the formatting, adds another ID tag. Now we’ve broke the rule about only having one ID in an HTML document. Sure, it renders fine, but if a JavaScript developer tries to add additional features, they will have to code around these problems.

So when should you use ID and when do you use a class? Here is my rule of thumb:

Unless you are 100% sure that you will never, ever have a duplicate element name on the same page, use a class. When in doubt, use a class. Only use an ID when you’re positive it will always be unique.

Examples of when I would use an ID are:

• Unique parts of page layout: <div id=”header”></div><div id=”content”></div><div id=”footer”></div>
• Identifying specific items: <div id=”post-32″></div><div id=”item-123″></div>

If it doesn’t fall into those two categories, I usually won’t use an ID. Most of the time, I’ve never had moment where I wished a developer had used a ID instead of a class. But I’ve had many times where I wish an element used classes intead of ID.

Related Posts

1. ASP .NET Accessing Session, Request, Response, etc from within a Class I remember it took me forever to figure this out and the headache before learning this that it caused. Because .NET is strongly typed you are unable to access the Session, Request, or Response (and many other Http/Web object) from within a class library like you can writing in a...
2. ASP .NET 2.0, GridViews, HyperLinkField, and JavaScript I’ve found some interesting notes on ASP .NET’s GridView, it’s limitations and work arounds. For work I was looking for a way to execute JavaScript from clicking a link on a GridView Cell. An example would be to having a list of transactions and wanting to click a link to...
3. iPhone Web Development: Controlling the viewport via Javascript Lately I’ve been doing a lot of iPhone web applications. A client wanted to create a portion of their site for the iPhone, and they wanted it to look a very specific way. In order to do this we had to set the view port’s maximum-scale and minimum-scale to 1....