Semantic/stateful/accessible selectors are really important!
I strongly recommend these articles for anyone, especially if you’re still using
.is-active or similar classes for styling state.
“Style with Stateful, Semantic Selectors” by BenDMyers
Style with Stateful, Semantic Selectors
See how building with accessible semantics from the get-go can give you expressive, meaningful style hooks for free.
“User Facing State” by Scott O’Hara on CSS-Tricks
User Facing State | CSS-Tricks
“Using CSS to Enforce Accessibility” by Adrian Roselli
Using CSS to Enforce Accessibility
The CSS3 logo as a head atop a torso with its arms folded across its chest. I am a big proponent of the First Rule of ARIA (don’t use ARIA). But ARIA brings a lot to the table that HTML does not, such as complex widgets and state information that…
“Represent State with HTML Attributes, Not Class Names” by Aleksandr Hovhannisyan
Represent State with HTML Attributes, Not Class Names | Aleksandr Hovhannisyan
Developers often use class names to represent a change in a component’s state, but this leads to redundant (and sometimes inaccessible) markup. Instead, we should use native HTML attributes to represent state and style those discrete states with the CSS attribute selector.