Атрибуты 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.
![Изображение статьи: Селекторы [data-state]: стили без десятка классов](/_next/image?url=https%3A%2F%2Fpusk-media.ru%2Fblog%2Fdata-attribute-selektory-cover.png&w=3840&q=75)