Flex/Grid Over JS Measurement
SHOULD: Solve layout with flex and grid instead of reading `getBoundingClientRect`/`offsetWidth` and writing the result back as inline styles — measurement forces a synchronous reflow, can only run after first paint (so the UI visibly jumps), is wrong during SSR, and goes stale without a `ResizeObserver`.
Solve layout with flex and grid instead of measuring elements and positioning them in JavaScript
Bad
Good
Why it matters
Reading getBoundingClientRect or offsetWidth forces a synchronous style and layout recalculation, and writing the result back into inline styles triggers another one — layout thrash. Worse, the measurement can only run after the first paint, so the UI visibly jumps into place, is wrong during SSR and before hydration, and goes stale the moment the content or the container changes unless you also wire up a ResizeObserver.
Flex and grid express the same intent declaratively: the browser solves it during its own layout pass, correct on the first paint and on every resize.