Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 367
Arad Avatar asked Feb 14 '18 21:02

Arad


3 Answers

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.

like image 75
Plippie Avatar answered Sep 25 '22 06:09

Plippie


give them another class for example:

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

.myClass.special{
  color: red;
}
like image 21
Manuel Otto Avatar answered Sep 24 '22 06:09

Manuel Otto


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.

like image 37
code-orange Avatar answered Sep 21 '22 06:09

code-orange