HTML and CSS techniques to reduce your JavaScript
I’m not surprised but a little disappointed that most of the older techniques aren’t mentioned:<p>- checkbox/radio inputs can be used to toggle state with `:checked ~ .foo` selectors<p>- `:focus` (and now `:focus-within`, and `:active` though it’s less useful) can be used similarly, but also allow child selection [Edit to add: `tabindex="-1"` makes anything focusable with a pointer input, but doesn’t capture keyboard tab or  iteration with assistive tools]<p>- `:target` can be used similarly, paired with fragment links [Edit to add: but beware history entries, this can be a poor UX]<p>- `<label>` can be used to not only set those states but also trigger scrolls (including within `scroll-snap` parents) without creating navigation history entries<p>- the `attr()` function can be used to reference server-dynamic HTML data for display with `content` in pseudo-elements<p>- I have to assume CSS animations are adopted widely enough that people aren’t using JS for that where it isn’t needed; but you can also use declarative, even interactive, animations in SVG<p>- speaking of which, inline SVG (even `<use>` references) are part of the CSS cascade, and you can change any CSS-addressable property with `currentColor`<p>- and you can nest HTML in SVG with `<foreignObject>` if you want to use SVG techniques in HTML<p>- probably not worth mentioning but in case you don’t know... if you miss table layouts, you can use them with `display` on basically anything; if you want table semantics without tabular rendering you can override `display` as well<p>Alllllll of that being said, if you use these techniques <i>check your stuff with assistive technologies</i>!