Reduce the JS Workload with no- or lo-JS options

I have nothing against JS,
but it has better things to do
than manage your accordions and nav menus…

For years, JavaScript has been the web’s workhorse. If HTML or CSS couldn’t do what we wanted, we grabbed JavaScript to do it.

While that has helped push the user’s experience forward, the web is choking on JS. So as HTML and CSS continue to get stronger, we should transfer any JavaScript workload possible to them.

This is an organic collection of common JS patterns that can be replaced with just HTML, CSS, and no, or very low, JS. As HTML and CSS continue to mature, this collection should expand.

The repo can be found on GitHub.
Issues and PRs are welcome!

Components

• Accordion - Adjust Marker
• Accordion - Animate Open/Close
• Accordion - Basic
• Accordion - Exclusive Open
• Accordion - Force Open
• Accordion - Initially Open
• CSS Carousel - Animated Hero
• CSS Carousel - Animated Loop
• CSS Carousel - Hero
• CSS Carousel - Indicator Dots
• CSS Carousel - Navigation Buttons
• CSS Carousel - Simple Swiper
• CSS Carousel - Snappy Swiper
• CSS Carousel - Swipe by Groups
• Expanding Form Field
• Fly-In Content - Scroll Animation
• Image Comparison Slider - Basic
• Image Comparison Slider - Custom Handle
• Input with Dropdown - Number
• Input with Dropdown - Text
• Input with Dropdown - Time
• Lazy Load - Audio
• Lazy Load - Image
• Lazy Load - Video
• Modal/Popover - Add Backdrop
• Modal/Popover - Add Close Button
• Modal/Popover - Animate Open/Close
• Modal/Popover - Auto
• Modal/Popover - Manual
• Modal/Popover - Reposition
• Offscreen Content - Add Backdrop
• Offscreen Content - Add Close Button
• Offscreen Content - Animate Open/Close
• Offscreen Content - Related Content
• Offscreen Nav - Add Backdrop
• Offscreen Nav - Add Close Button
• Offscreen Nav - Animate Open/Close
• Offscreen Nav - Basic
• Parallax - Perspective
• Parallax - Scroll Animation
• Scroll - Header Shadow
• Scroll - Shrinking Header
• Scroll Spy - Nav Menu
• Smooth Scrolling
• Sticky Content
• Tabs - Animated Content
• Tabs - Basic
• Video Hero - Content over `video`

Resources

A lot of people have been writing on this topic for quite some time. Here are just a few (note, some are a bit dated now, so buyer-beware):

• You Don’t Need JavaScript for That! by Cristina Silva (2016-05)
• Less JavaScript by Jeremy Keith (2016-11)
• HTML and CSS techniques to reduce your JavaScript by Anthony Ricaud (2020-12)
• 5 things you don’t need Javascript for by Steven Waterman (2022-02)
• When HTML & CSS Replace Javascript: A Simple Element Cheatsheet by Joanna Chmiel (2022-05)
• Replacing JS with HTML and CSS by Chris Ferdinandi (2023-05)
• You don’t need JavaScript for that by Kilian Valkhof (2023-12)
• You Don’t Need JavaScript for That by Kevin Powell (2024-11)
• Modern CSS Techniques That Replace JavaScript by Muhammad Hashir (2025-06)

And here are a couple of fantastic all-around “no or low JS” resources:

• Theo Soti (Theo even wrote a book about this topic!)
• Utsav Meena There are surely many more examples, so please contribute to this list!

[!NOTE] I was well into this project when I finally stumbled across the massive You-Dont-Need-JavaScript repo… And while it does have lots of examples, I find the lack of descriptions and demos disappointing/discouraging. Also, as all the code examples are full page, it can be hard to discern what is needed for the feature, and what is just to make the rest of the page work or look good… Anyhow, going to continue pushing forward with this, as I think it is a useful endeavour.

Contribute

If you’d like to add your favorite no- or lo-JS pattern, please submit a PR, and please try to follow this established pattern as much as possible…

• If creating a new top-level pattern, name it after the feature, not the HTML element or CSS property; in theory, this should make it easier for people to find.
  Example: The use of lazy-load instead of something like loading or preload. Ideally someone looking to lazy-load something might find that more easily.
• Within the pattern, create a top-level README.md that includes any other names by which this might be called, a brief description, and links to any variations of that pattern.
  Each variation should have a brief description, list whether it is “No JS” or “Lo JS”, link to Baseline or CanIUse for that feature, and ideally provide a working example via CodePen or similar. Example: Within the accordion pattern, the README.md states “aka: Expanding Content Panel”, how it is implemented and why that is a benefit, then lists (and links to) five variations of that pattern, including links to a CodePen for each.
• Finally, within each variation, include a simple index.html, styles.css and script.js, each as needed, with as little code as is required to make the pattern work (not an entire HTML document). Ideally code can be kept to a minimum, to help with clarity and to reduce confusion, but feel free to include comments if you think they will help the user better understand. Try to eliminate unnecessary fonts, colors, margins, padding, etc., unless it is crucial to making the pattern work.
  Example: The accordion > adjust-marker pattern contains an index.html and styles.css file, each with the minimal code needed to make the pattern work. The HTML file includes a comment that the heavy-lifting is handled in the CSS file, and the CSS file includes comments explaining each various “bit” to the pattern.

If you find an error, or would like to submit an alternate or improved method for some pattern, please create an Issue, providing as much supporting information as possible, and ideally a contact method, should there be questions.

Contact

If you’d like to just reach out to me for some reason, please feel free to do so via email (aarontgrogg@gmail.com) or any of the contact methods listed on my GitHub profile.