"Не используйте идентификаторы в селекторах (CSS)", что использовать вместо идентификаторов?

Question

Одно из правил CSS lint: "Лучше не использовать идентификаторы в селекторах". Итак, что мы должны использовать вместо идентификаторов, чтобы указать на уникальный элемент? Например, у меня есть сотни элементов, у которых есть класс с именем "myClass", и я хочу, чтобы у одного из них было специальное свойство CSS отдельно. Что я могу сделать?

Answer 1

CSS-lint должен быть "исправлен" или, скорее, обновлен до современного стандарта, потому что он основан на более чем 10-летней базе кода, где поддержка IE6 и IE7 все еще предпочтительнее.

В настоящее время каждый должен знать, что идентификаторы - это самые быстрые селекторы css, за которыми следуют классы, теги Dom, соседние братья и сестры и т. Д., И что CSS читает справа налево. Таким образом, самый короткий селектор самый быстрый. Так как #ID является самым быстрым селектором, а #ID (должен быть) уникальным, это насмешка, чтобы не использовать #id в качестве селектора в CSS.

Answer 2

Дайте им другой класс, например:

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

.myClass.special{
  color: red;
}

Answer 3

Вы можете добавить дополнительный класс к элементу и указать его в своем CSS вместо идентификаторов. Селекторы идентификаторов имеют более высокую специфичность, чем селекторы атрибутов, но использование идентификаторов в css не рекомендуется и не может быть использовано повторно. Классы CSS могут делать все, что могут идентификаторы.

Answer 4

Хорошей практикой является использование атрибутов данных для уникальных элементов.

<div class="myClass" data-id="target"></div>
<div class="myClass"></div>
<div class="myClass" data-id="trigger"></div>
<div class="myClass"></div>

И нацелить тех, кто в вашем CSS:

.myClass[data-id="target"] {
  color: tomato;
}

.myClass[data-id="trigger"] {
  color: mediumslateblue;
}