Существуют ли причины не использовать состояния и роли ARIA в качестве селекторов в CSS?

В настоящее время я работаю над созданием доступного сайта, использующего, помимо прочего, теги ARIA. Мне пришло в голову, что такие атрибуты, как aria-invalid, были бы хорошими селекторами для моего CSS, а не с использованием класса .error.

Преимущество этого - более компактный, более значимый HTML, который легче для меня подключиться к CSS (и JS). Тем не менее, я не видел, чтобы это делалось в другом месте, поэтому я подозрительно, что есть недостатки в использовании тегов доступности для стилизации. Я подозреваю, что использование неконфигурированных селекторов атрибутов делает менее эффективный CSS, но есть ли другие недостатки, которые я не рассматривал?

Ответ 1

Селекторы атрибутов - это очень гибкий способ управления стилями для крупномасштабного CSS, поскольку селектор атрибутов всегда будет иметь специфичность 0-0-1-0.

Селекторы

[aria-*] отлично подходят для использования в качестве стилей, и я также рекомендую использовать пользовательские атрибуты [data-*], чтобы заполнить пробелы, где вам может понадобиться одноразовый. Разумеется, селектор классов следует продолжать использовать, однако вы можете сделать некоторые очень элегантные расширения стиля с помощью селекторов атрибутов:

[data-foo] {
    color: red;
}
[data-foo="bar"] {
    color: blue;
}
[data-foo="fizz"] {
    color: green;
}

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

Вы можете создать свою собственную форму классов с помощью селектора [attr~="value"], если это необходимо.

Использование атрибута "содержит" селектор, может быть полезно для метода, который я называю "классными изображениями"

Одним из скрытых преимуществ использования атрибутов над классами является увеличение производительности в JavaScript. Вместо того, чтобы проверять наличие класса на элементе (что очень легко ошибиться), браузеры поддерживали getAttribute, hasAttribute и setAttribute в течение длительного времени.