html - Are there reasons not to use ARIA states and roles as selectors in CSS? -

i'm working on making accessible site using, among other things, aria tags. occurred me attributes such aria-invalid selectors css target, rather using .error class.

the benefit of leaner, more meaningful html, easier me hook css (and js). said, haven't seen done elsewhere i'm suspicious there downsides leveraging accessibility tags styling. suspect use of unconstrained attribute selectors makes less performant css, there other downsides haven't considered?

attribute selectors flexible way manage styles large-scale css because attribute selectors have specificity of 0-0-1-0.

[aria-*] selectors fine use styling hooks, , recommend using custom [data-*] attributes fill in gaps might need one-off. class selectors should continue used, can elegant style extensions attribute selectors:

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

each of these selectors has same specificity, , cascade allow styles applied appropriately.

you create own form of classes using [attr~="value"] selector if need be.

using "attribute contains" selector can useful a technique call "classy images"

---

one of hidden benefits using attributes on classes performance gain in javascript. instead of having check presence of class on element (which remarkably easy wrong), browsers have supported getattribute, hasattribute, , setattribute long time.