80% of the JavaScript on modern websites solves problems that do not exist anymore.
Accordion? <details> and
<summary>, HTML
since 2014.
Zero JavaScript.
Layout shifts on resize? CSS Grid, Subgrid, Grid Areas. Reorder elements visually, completely independent of the DOM.
State management for UI toggles? One line:
element.toggleAttribute('data-open'). CSS handles the
rest with :has() and attribute selectors.
Responsive navigation?
:has()
plus checkbox toggle. No JavaScript. No library.
The Import List
Instead, we import React for a contact form. jQuery for a carousel. A 47 KB accordion library for three collapsible sections. 90% of the library's code unused, but bundled anyway.
The cost: battery drain on mobile devices. Slower initial page load. Dependency chains you will never audit. Build pipelines for problems HTML solved a decade ago.
The irony: some call CSS state management "hacky" while writing
addEventListener spaghetti to shuffle DOM nodes on
every click. Quite.
What the Browser Ships
Modern HTML and CSS handle accordions (<details>),
modals (<dialog>),
form validation (native), lazy loading
(loading="lazy"), smooth scrolling
(scroll-behavior), carousels
(scroll-snap),
container queries,
the :has() condition selector, and
subgrid.
Before you npm install, check if the browser already
solved it.
The Server Export
This problem did not stay in the browser. Node.js exported the npm mindset to servers. Your backend now inherits the same dependency debt, with production databases attached. And then its archaic single-threaded architecture forces you to spawn countless service instances, sending your error vectors exponentially through the roof.
The Point
The browser is not a JavaScript runtime that happens to render HTML. It is a rendering engine with JavaScript as an escape hatch.
The greenest code is the code you did not ship.