Mobile-first CSS that stays maintainable

Mobile-first CSS means the default styles are for small screens, and min-width media queries add layout as space allows. The direction matters less than the habits around it.

Fewer breakpoints, based on content

I avoid breakpoints named after devices. Instead I add a breakpoint where the content starts to look wrong. Most components need one or two at most.

Let the browser do the maths

Modern CSS removes a lot of breakpoints entirely. Fluid type with clamp() scales smoothly between a minimum and maximum:

h1 {
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
}

Auto-fitting grids rearrange columns without any media query:

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 1.5rem;
}

The min(100%, 18rem) part stops cards overflowing on very narrow screens.

Keep spacing in tokens

Spacing values scattered through a stylesheet are hard to change. A small scale of custom properties keeps rhythm consistent and makes adjustments safe.

Protect against overflow

A few rules prevent most horizontal scroll bugs:

• Images and media get max-width: 100% and height: auto
• Long words and URLs get overflow-wrap: anywhere where they can appear
• Grid and flex children that hold text get min-width: 0

Test the in-between widths

Designs show 375px and 1440px. Real users are everywhere in between. Dragging the browser slowly from narrow to wide is still one of the best tests I know.