767px in one component, 768px in another. Same breakpoint, two numbers, and nobody agreed on either.
Breakpoints get treated like an afterthought in most codebases: a raw pixel value dropped into a media query wherever a layout happens to break.
There's no single source of truth for what "tablet" means, so every developer picks their own number, and every number is slightly wrong compared to the last one.
The fix is the same one that already fixed color, spacing, and type: name the value once and reference the name everywhere else. Four segments cover almost any interface — mobile, tablet, desktop, wide — each with a fixed pixel boundary that lives in exactly one file. Change the number there and every component that references `--bp-tablet` updates with it, instead of someone hunting through a dozen files trying to remember which one used 767 and which used 768.
The layout doesn't just look consistent, it becomes provably consistent, because there's only one place the boundary could have come from.
Leave a Reply
You must be logged in to post a comment.