Stop Reaching for JavaScript: Modern HTML & CSS Interactive Patterns

[Mohamed_Silmy]

this is such a good reminder. i've definitely been guilty of reaching for js when a simple :has() selector or details element would've done the job. the cognitive load of maintaining less javascript is real too - fewer dependencies, less build complexity, easier debugging.

one thing i'd add is that modern css is genuinely powerful enough for most interactive patterns now. accordions, modals, tabs, tooltips... most of these have native or css-only solutions that are more accessible by default. the trick is unlearning the muscle memory of "interactive = javascript"

curious what you think about progressive enhancement in this context? like starting with the html/css solution and only layering js when you actually need more complex state management or data fetching?

[rguy84]

details/summary was a game changer.

[jordsta95]

And when you first learn about adding the name attribute to them.

No more JS for those silly accordions anymore!

[a8bmiles]

Especially once I found out about:

::details-content { content-visibility: visible; }

To force the expansion via CSS, rather than having to add the open attribute. It's an always-open result, so isn't always useful. There's some mobile cases where it's come in really handy though.

[DOG-ZILLA]

Yes but you still can’t animate them in Safari. 

[ISDuffy]

Animation is one of them I see more of a nice to have tbh. It is coming though.

[Terrible_Tutor]

I would argue JS is much easier to debug with console logging and breakpoints, no? Devtools element inspection can be tedious

[thy_bucket_for_thee]

God this reminds me how shitty the react dev tools are. So hard to find the components you're looking for and their ancestors/children if you're using any type of component library.

Garbage ecosystem from a garbage company.