Селекторы [data-state]: стили без десятка классов

data-ui, data-open и BEM вместе.

Атрибуты 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.

#CSS#архитектура#UI-kit

Читайте также