Also available in Español
The Problem
A dropdown needs to open. A modal needs to appear. A nav link needs to show which section the reader is currently in.
The blunt route is element.style.display = 'block' state and appearance decided in the same line, nothing left for CSS to own. Most experienced developers already avoid this. The more common pattern is a class instead: classList.toggle('is-open'). That's a real improvement, and a real state abstraction CSS decides what .is-open looks like, JavaScript just toggles whether the class is present.
Here's where it gets more interesting. .is-open is drawn from the exact same namespace as every styling hook in the codebase. Nothing in the syntax marks it as state rather than appearance. A teammate six months from now, skimming the stylesheet, has no way to tell .is-open apart from .card-title except by reading the intent into the name and trusting that convention held.
