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...
For further actions, you may consider blocking this person and/or reporting abuse
We like to keep
classes for style,ids for #links, andrelfor the occasional JS selector. To each their own, and at some super high level there may be reasons to hyper-optimize - but for teaching especially, this really helps keep things extremely clear and readable.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
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!
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?
I feel it the same.
A little example:
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.
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.
I just like to remind all who read this that this pice is someone's opinion and is disputed as to whether or not "avoiding" IDs in your HTML/styling should ultimately be avoided as some sort of "best practice".
There is absolutely nothing wrong with using an ID for a CSS selector when done appropriately.
And actually all the reasons given in the article are all reasons FOR using them.
I do also heavily support the use of
classesas much as possible and I personally use an ID so high in the DOM as to be able to override highly specific, often chained class selectors, simply with an ID.The fact that an ID gets automatically created as properties on the DOM is yet another reason to use them, when applicable.
I'm all for not using IDs as selectors if thats your personal preference, let's just not discourage using them at all as a general best practice because, well, it's not some best practice not to use them.
I'd also recommend not discouraging others to not use a tool just because you have not yet explored all uses for them. How about an unbiased article about how and when they ARE useful?
For instance, I'd prefer there be an ID on each header of this page, should I link it and want a user to jump directly to that portion of the page, like it was designed to do.
Just my two cents.
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 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.
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 never ever think of using ids for css styling, in my mind always sounded like a very bad idea.
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.
Great post! You made some solid points.