I’m big on progressive enhancement but on real world projects, you gotta account for there being no JavaScript available for highly interactive elements.
The ol’ no-js class or in CUBE CSS projects, a data-js="none" exception has been the go-to for years, but utilising a media query like David shares with us is pretty handy.
If you ever wanted a pro tip from me it’s to build front-ends with the attitude of “JavaScript will not be available”, rather than “JavaScript might not be available”. It 100% will not be available for a lot more users than you think, so with a progressive enhancement lens, building for no-JS by default then using the scripting: enabled media query rule seems like a good call.
@media (scripting: enabled) {
.interactive-component {
/* All the styles that will apply if JS is available */
}
}