Rethinking UI State: CSS Range Syntax vs Class Toggling

For years, we've handled UI state by toggling classes in JavaScript. User selects a date range? Loop through elements → add/remove classes. It works. But it tightly couples visual state to DOM manipulation. With the emerging CSS Range Syntax, we can rethink that pattern. Instead of asking: "Which classes should JS toggle?" We can ask: "What if CSS evaluates the condition itself?" Let's walk through a concrete example. The Traditional Pattern: JavaScript Controls Visual State Imagine a calendar where users select a start and end date. A typical implementation looks like this: days . forEach ( day => { const value = Number ( day . dataset . day ); if ( value >= start && value <= end ) { day . classList . add ( ' in-range ' ); } else { day . classList . remove ( ' in-range ' ); } }); JavaScript: reads values from the DOM performs the comparison mutates classes controls visual state Problems? JS depends on DOM structure Refactoring markup can break logic State and presentation are coupled