Mobile First

Mobile-first means writing your CSS for the smallest screen as the default, then layering on min-width queries for larger screens.

Mobile-First

/* default — for everyone, starting with phones */
.layout {
  display: block;
  padding: 1rem;
}

@media (min-width: 768px) {
  .layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    padding: 2rem;
  }
}

@media (min-width: 1200px) {
  .layout {
    grid-template-columns: 250px 1fr 300px;
  }
}

The default styles work everywhere. Each breakpoint adds complexity for screens that have room for it.

The Alternative — Desktop-First (Avoid)

.layout {
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  padding: 2rem;
}

@media (max-width: 1199px) {
  .layout {
    grid-template-columns: 250px 1fr;
  }
}

@media (max-width: 767px) {
  .layout {
    display: block;
    padding: 1rem;
  }
}

Same outcome, but harder to reason about — you’re declaring things at the top that you then immediately undo at smaller sizes.

Why Mobile-First Is Better

• Progressive enhancement — the basic layout works for everyone, enhancements layer on
• Smaller mobile CSS — phones don’t have to download styles they then override
• Easier to think about — “add complexity as the screen grows” matches how you’d design

Container Queries Are Also “Smaller First”

Apply the same pattern to container queries:

.card {
  /* tight layout — default */
}

@container (min-width: 500px) {
  .card {
    /* wide layout */
  }
}

Where Mobile-First Doesn’t Apply

Some properties don’t have a mobile/desktop axis — colors, typography, animations. Just declare them once.

End of Chapter

That’s layout. Next chapter: making things actually look good — typography, backgrounds, shadows, transforms, animations.