"Don't use IDs in selectors (CSS)" then, what to use instead of IDs?

Question

One of CSS lint rules is: "It's better to not use IDs in selectors". So, what should we use instead of IDs to point to a unique element? For example, say I have dozens of elements that have a class named my-class, and I want only one of them to have a special CSS property. What can I do?

Eyeless

they didn't say "don't use" but better don't use : github.com/CSSLint/csslint/wiki/Disallow-IDs-in-selectors – Alceste

you could combine classes, like @manuel-otto suggests. However, the point to take from the CSS lint rules is that you want to avoid styling IDs as much as possible since they cannot be re-used. Sometimes, IMHO, it is more succinct to use an ID and ensure that only one element is styled differently (instead of potentially others by virtue of not being unique) – Haler

Ignore CSSLint. It's opinionated nonsense. – Traitorous

@TemaniAfif Actually, it does say "Don't use". – Tobe

Answer 1

give them another class for example:

<div class="myClass special"></div>

.myClass.special{
  color: red;
}

Tympany

The interesting point here is that CSS lint also says that we shouldn't use adjoining classes :) – Eyeless

@AmirHosseinAhmadi maybe lint also said "better not code anything !!" ... read their doc again, they never said DON'T use, but avoid – Alceste

Answer 2

CSS-lint should be 'fixed' or rather updated to modern standard because its based on more than 10 year old code base where support for IE6 and IE7 where still preferable.

Nowadays everyone should know ID's are the fastest css selectors followed by Classes, Dom tags, adjacent siblings etc. And that CSS reads from right to left. So the shortest selector is the fastest. Since #ID is the fastest selector and #ID (should be) unique its ridicule to not use the #id as selector in CSS.

Dunford

There are good reasons not to use IDs as CSS selectors. I found this article to be a good summary of those. If you want short selectors, you can use unique class names, too. – Siffre

It's better to start with maintainability and easy to read code than performance as a metric, especially because the performance difference is rarely significant. In cases where it is, it's worth the tradeoff, but it's still a tradeoff. It's also less than ideal for accessibility. – Degree

seriously... use experience, wisdom, and common sense to use CSS IDs or classes based on their advantages/disadvantages situationally... which also means avoid following broad-sweeping assertions of some devs upon other devs... thinkers think... and rule followers follow – Lavadalavage

Answer 3

You could add an additional class to the element and specify it in your css instead of ids. ID selectors have a higher specificity than attribute selectors but using ids in css isn't recommended and can't be reused. CSS classes can do everything IDs can.

Herb

The following patterns are considered okay and do not cause a warning: /* space in between classes */ .foo .bar { border: 1px solid black; } – Herb

The selector .foo .bar has a different meaning than .foo.bar. The former selects .bar elements that are descendants of a .foo element, while the latter selects elements that have both classes. – Siffre