Mobile-first means writing CSS for the smallest screen by default, then adding styles for larger screens with min-width media queries.
This approach produces leaner CSS and ensures mobile performance, since mobiles download only base styles.
/* Mobile base — no media query needed */
.card {
padding: 1rem;
font-size: 1rem;
}
/* Tablet enhancement */
@media (min-width: 768px) {
.card { padding: 2rem; font-size: 1.125rem; }
}
/* Desktop enhancement */
@media (min-width: 1200px) {
.card { padding: 3rem; font-size: 1.25rem; }
}Start with the simplest, most constrained layout (mobile) and progressively enhance — not the reverse.