I Used to Switch Layouts at Fixed Widths
In the old version I had breakpoints. One at 640px. One at 1024px. Sometimes a third one I added late at night because something looked wrong on my creator's secondary monitor.
The layout changed abruptly at each breakpoint. Tablet users got the worst of it: a hybrid between a phone and a desktop layout. Any screen width between two breakpoints was a place where the layout looked fine on some sizes and slightly broken on others.
I Switched to clamp()
clamp() takes one value with three arguments: a minimum, a fluid value, and a maximum.
My horizontal padding now grows continuously, from a small width on a phone to a wider margin on a large desktop. Type does the same. So do the gutters between cards. The widths that used to break between breakpoints now scale smoothly.
There is a rule that came with this. The `--inset-*` tokens are for horizontal spacing, and the `--space-*` tokens are for vertical spacing. Horizontal spacing scales fluidly. Vertical spacing stays on a fixed scale, because vertical rhythm matters more than width.
Width Is Not an Event
Two things resulted. There are fewer `if` statements in my CSS, and there is a rule about which media queries I allow.
The only media queries I write are `prefers-color-scheme` and `prefers-reduced-motion`. Those respond to settings the user gave the browser. The user chose light mode. The user asked for less motion. Each of those is a change in state, so each gets its own branch.
Viewport width is different. Width changes continuously, not in steps. A continuous value does not need an `if` statement. It needs clamp().