10

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?

Arad Alvand
  • 8,607
  • 10
  • 51
  • 71
  • 4
    they didn't say "don't use" but better don't use : https://github.com/CSSLint/csslint/wiki/Disallow-IDs-in-selectors – Temani Afif Feb 14 '18 at 21:15
  • 1
    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) – blurfus Feb 14 '18 at 21:16
  • 7
    Ignore CSSLint. It's opinionated nonsense. – Alohci Feb 14 '18 at 22:39

3 Answers3

16

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.

Plippie
  • 2,836
  • 33
  • 28
  • 2
    There are good reasons **not** to use IDs as CSS selectors. I found [this article](https://dev.to/clairecodes/reasons-not-to-use-ids-in-css-4ni4) to be a good summary of those. If you want short selectors, you can use unique class names, too. – Oliver Sep 16 '21 at 08:51
  • 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. – Andrew Toups Jan 07 '23 at 16:40
6

give them another class for example:

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

.myClass.special{
  color: red;
}
Manuel Otto
  • 6,410
  • 1
  • 18
  • 25
  • 6
    The interesting point here is that CSS lint also says that we shouldn't use adjoining classes :) – Arad Alvand Feb 14 '18 at 21:14
  • 4
    @AmirHosseinAhmadi maybe lint also said "better not code anything !!" ... read their doc again, they never said DON'T use, but avoid – Temani Afif Feb 14 '18 at 21:17
1

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.

code-orange
  • 129
  • 6
  • The following patterns are considered okay and do not cause a warning: /* space in between classes */ .foo .bar { border: 1px solid black; } – code-orange Feb 14 '18 at 21:25
  • 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. – Oliver Sep 16 '21 at 08:45