Using IDs in CSS selectors?

[alanshortis]

I have always used IDs for elements/CSS selectors where an element isn’t going to be used more than once, and class for elements that are to be repeated.

Recently I have been reading that this is bad practice and that I should always use classes in my CSS NOT IDs.

What is your opinion on this? What is the advantage of using class and why shouldn’t I be using IDs? Is it worth going over my current projects and changing all my CSS selectors to class names?

[David_Leitch]

The only reason I can think of to use id over class is when you want to use :target, with the uses being shown by Chris [here](https://css-tricks.com/on-target/ “https://css-tricks.com/on-target/”). To be honest, though, I’ve only ever used :target once.

[Andy Howells]

@alanshortis – There’s a couple of camps on this one. Some (like me) believe that using ID’s is perfectly fine if the site is small and the items truly unique.

Others believe that only classes should ever be used because of potential specificity issues – I.E – a DIV ID style surprisingly over-riding an additional class.

Personally I think you need to consider 2 things when making this decision – is the element truly unique and will you be working alone on this project? – If both of those are yes, then by all means use ID’s for styling, but if either is no then you need to be looking at classes to either keep your code light (if it’s a repeating style) and to avoid another developer losing their sanity if not working alone.

[chrisburton]

I have to agree with @joshuanhibbert. I was using ID’s on my site as well for specific areas. I found it much easier and cleaner to maintain after switching.

[alanshortis]

I have done a ton of reading on this today… I cannot see a strong argument for NEVER using IDs. If I know that an element is to appear only once I don’t see why I shouldn’t just use the element ID.

I understand the argument that CSS should be reused across a site rather than specifying styles more than once. That’s fine, and in that case I use class names all the time.

A mixtire of IDs and classes works well for me so in the absesnce of a **good** reason to use only classes I’ll stick with what I know.

[wolfcry911]

Why do no-id advocates state specificity as a potential problem? Its a feature! I have never, ever encountered a project where ID specificity has been an issue. Have you? And I don’t mean where something didn’t work because of a single id in a previous selector…

And who says classes define characteristics and ids don’t? Why can’t an id have characteristics? So what if its a single specific element.

I also don’t understand why people care so much about conserving every single non-essential byte in a page and then proceed to load the entire page with classes.

[Senff]

Some say yes, some say no. I believe it’s more a matter of opinion than anything else (both camps have good points). This quote is a bit worrying, though:

> Recently I have been reading that this is bad practice

Please let’s not define the opinions of leading developers as good or bad practice.

[Andy Howells]

I personally don’t get the hate for ID’s. I mean they are exactly that, identifiers for unique items. Classes in my mind are like a category, rather and a unique identifier.

An analogy for that would be say you have a blog, each post that has an ID of its title (unique to itself) but it’s category is that it’s a blog post.

So your ID might be #title-of-post and the class would be .blog-post.

As far as I can see there’s no reason not to use that, ID’s are available in HTML & CSS for a reason, to be used. Swapping that out for a class instead “just because” doesn’t make sense to me.

Either way, it’s personal preference.

[Chris Coyier]

Here is my article on the subject. One of them, anyway: https://css-tricks.com/a-line-in-the-sand/

Also worth noting that I haven’t anywhere else yet. The biggest problem with ID’s is the super high specificity that easily can bite you on big projects. But you can always knock ID’s specificity down to class level by only selecting them like:

[id=”foo”] {

}

[Taufik Nurrohman]

Personally I start to use more classes than ID for now. I feel that specifies the name of the class is much easier than ID, particularly for similarity modeling without having to repeat the declaration multiple time in another selectors:

<div id="main" class="col-group text-left clearfix">

<div class="col left-col main pull-left"></div>

<div class="col right-col sidebar pull-right"></div>

</div>

I just use the ID to indicate that the location is a primary location, “This is the primary location, primary section, primary block that is strong, and assertive”. Although I didn’t think to use it in the CSS selector.

Try not to worry with the old CSS in my personal blog which is still widely used ID, but began to use more classes to the customer site/blog.

Personally…

[Author]

Posts