Использование свойства HTML в качестве селектора css

Question

Обычной практикой в ​​стиле html с использованием CSS является использование идентификатора или класса для селектора. По какой причине не используется свойство html в качестве селектора?

Использование CSS

.success {
 border: 1px solid green;
}

<input class="success"/>

против использования HTML Свойство

input[success] {
  border: 1px solid green;
}

<input success />

Answer 1

Атрибут id однозначно идентифицирует элемент на странице ... и не только для CSS.

Атрибут class предоставляет список произвольных категорий, которые вы назначаете элементу ... и не только для CSS.

Создание ваших собственных атрибутов приводит к недействительности HTML, вплоть до того момента, когда язык меняется, добавляя новый, который вступает в противоречие с тем, который вы создали, что приводит к тому, что ожидаемое поведение применяется к вашему. элемент по браузерам.

Answer 2

Лучшая практика: вы должны максимально использовать селектор HTML. Это делает код более управляемым и понятным для людей. Существуют также преимущества в производительности (хотя в наши дни это не проблема).

Тем не менее, существует множество случаев, когда НЕ выгодно использовать селектор HTML. В вашем примере есть атрибут состояния, но не у всех элементов. Как вы будете по-разному отображать текст в вашем div, когда это предупреждение вместо контекстной информации? Для этого нет атрибута по умолчанию.

Также намного проще переключать классы, чем устанавливать атрибуты с чем-то вроде Javascript.

Наконец, вы можете учесть крайние случаи, которые потребуют очень замысловатые HTML селекторы li > li:nth-child(11), когда вы можете просто добавить класс .special. Это особенно верно, когда ваши лине динамичны c, и вы больше не хотите выделять 11-е ...

---

Чтобы ответить на ваш вопрос. Ничто не мешает людям. Но я лично собираюсь написать код самым простым способом, который решит мою проблему. Я предполагаю, что я очень "нормален" в этом аспекте, и у других есть подобные причины.