Mobile-First
Write base styles for small screens, then enhance for larger ones. This keeps the default path lightweight for mobile users.
CSS
Beginner
3 min read
Mobile-First Strategy
Example
.nav { flex-direction: column; gap: 0.5rem; }
@media (min-width: 768px) { .nav { flex-direction: row; gap: 1.5rem; } }
@media (min-width: 1024px) { .nav { gap: 2.5rem; font-size: 1.1rem; } } Pro Tip
Mobile-first CSS typically has less total code than desktop-first.