Селекторы [data-state]: стили без десятка классов
![Селекторы [data-state]: стили без десятка классов](https://pusk-media.ru/blog/data-attribute-selektory-cover.png)
Атрибуты data-state="open" позволяют стилизовать [data-state=open] без классов .is-open — удобно для headless компонентов и тестов.
Не дублируйте данные только в data-атрибутах для SEO — видимый текст остаётся в DOM.
- [Attribute selectors — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) — [attr=value] синтаксис.
- [data-* attributes — MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) — Кастомные data.
---
## Специфичность
Селектор [data-state=open] сравним с классом — держите один источник правды в JS.
