Reasons not to use IDs in CSS

Claire Parker-Jones on April 08, 2018

Sometimes when I’m reviewing code, I advise a colleague not to use IDs for CSS style selectors, and inevitably get asked why. Like standing in queu... [Read Full]
markdown guide
 

Another unrelated reason to avoid using IDs: they are automatically created as properties on the global window object in JS.

 

I think this should be the first reason not to use ids

 

We should all start styling using type selectors and not class. We should start from the lower layer (type) and then go for attributes and class selection, and if we need it, ending with ID's.

Why using a .p {} class when we can use the lower selecto p {} and let users extend/override our style with attributes or classes?

 

Great post!

In the course I'm doing for full-stack development, in the CSS section it was advised to never use IDs ever, unless you absolutely need to. IDs are better used for JS it was suggested, and if anything it's lazy and inefficent code.

I wish I had known that when I learnt CSS a while ago and in my current codebase it's littered with IDs aha.

 

That's great that you can look critically at your old code and know how you'd improve it - you're definitely improving as a dev!

 

"A class on its own can't overwrite styles belonging to an ID."

I had no idea! Probably explains some (to my point of view) odd behavior I've noticed in the past but didn't fully understand. Sorta wreaks havoc on the "cascading" part of css.

 

What is the your recommendation for use of id's? I'm currently using them for single page elements that are not going to be reused i.e. a front page carousel or a contact form that won't be reused. Is there any reason you can't just use classes all the time?

 

No there's no reason you can't use classes everywhere for styling. Even if you think you'll only want to use a style once, there's no reason not to use a class for it. I can see why you would define "single-use" styles on the IDs but there isn't any advantage to doing that except for the higher specificity. I prefer to reserve IDs for other uses such as form labels and linking to anchor tags and keep all my styles defined by classes, for consistency.

 

using ids is way more performant for css rendering not that it will make much difference when compared to other optimiztions but if you using web components where ids don't leak out of the shadow dom it doesn't make much since to use class for single use since that class can't be used anywhere else.

 

Specificity is good. Embrace it, don't fight it. If you want to style an element a particular way because it is that element and no other, using its id in your selector is the right solution. You won't ever want to override it with a class.

 

This post is exactly the reason why I avoid using IDs in my CSS, classes makes you style different HTML element and still looks neat...in a way I don't really like having !important in my stylesheet....another reason i avoid IDs

 

i never ever think of using ids for css styling, in my mind always sounded like a very bad idea.

 

Think of Darwin classification tree. Nodes are classes, leafs are ids. I have an ID and a Class. I have common properties of a human, but I have my own properties that nobody else has. So HTML names (and CSS selector shortcuts # and .) for these attributes makes perfect sense. Use class for Class and id for unique and only.***

***The only real issue is a legacy bug in JS that creates a global window variables that hold references to the elements with id attributes. But with most modern frameworks that is not a problem, since most of the time you work with VDOM, not DOM.

 

I don't understand. I'm just a beginner and I think it's great to use classes for things which have the same CSS rules applied to them, and IDs for a rule that will only be applied to one element. I see nos. 1 and 2 if not as advantages for IDs over classes, at least an equal. If I see a class, I can immediately assume other elements have the same class and to be careful when altering it, but I can be sure altering an ID rule will have no unexpected side-effects. What you describe as consistency I see as ambiguity. Using IDs gives more explicit information to a developer, making it easier to understand the nature of my CSS.

Please make a follow up article explaining why using only classes is better. I still think using a combination of IDs and classes has benefits.

 

Where I use ID's in my CSS is if I want to support themes. This makes it easier to override colors and such.

 

Where I work, we use IDs for CMS content where our front end devs used to use style scoped to attach styles to customisations on elements, in preference to making a bunch of inline styles.

We use them in styling only because they're sometimes the only hooks we have from third-party modules or legacy CMS systems. This means that the CSS has a bunch of IDs in it already, and when a new developer starts, they tend to continue using them. I think wherever we do anything from scratch we use classes for everything style-related and data attributes for everything script-related.

Personally I'd prefer to use type selectors and document hierarchy first and classes second, but my voice is very small and hard to hear!

 

That's a good idea - you can easily override existing class styles that way.

 

Just saying, these 4 reasons are exactly why and when you want to use an ID, when all these needs are required (oversees classes, uniqueness). hopefully you will never need to use one.

 

I work in a stack where the web pages are generated from data (Oracle APEX).
Here is seems the use of IDs is very important, but it's about finding a balance.

 
code of conduct - report abuse