Mobile-first CSS

Mobile-first CSS means you write the styles for the smallest screens first, outside any media query, and then add rules for wider screens inside min-width queries. It is the default approach for responsive sites because it produces simpler, smaller stylesheets.

Two ways to write the same layout

Imagine a page with a main article and a sidebar. On wide screens they sit side by side. On narrow screens the sidebar goes below the article.

Desktop-first

Desktop-first CSS starts with the wide layout, then undoes it for small screens with max-width queries:

/* Desktop-first: base styles assume a wide screen */
.layout {
  display: grid;
  grid-template-columns: 1fr 18rem;
  gap: 2rem;
}

.sidebar {
  border-left: 1px solid #ccc;
  padding-left: 2rem;
}

@media (max-width: 47.99rem) {
  .layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-left: 0;
    padding-left: 0;
  }
}

The small-screen block exists mainly to cancel what the base styles set.

Mobile-first

Mobile-first CSS starts with the single-column layout, which needs almost nothing, then adds the wide layout:

/* Mobile-first: base styles work on every screen */
.layout {
  display: grid;
  gap: 2rem;
}

@media (width >= 48rem) {
  .layout {
    grid-template-columns: 1fr 18rem;
  }

  .sidebar {
    border-left: 1px solid #ccc;
    padding-left: 2rem;
  }
}

Nothing is undone. Each media query only adds. That is the core of mobile-first: base styles plus enhancements.

Why mobile-first produces less CSS

Elements in normal flow already stack vertically and fill the available width. That is exactly the layout a narrow screen needs. So the small-screen version of most components is close to the browser's default behaviour, and needs few rules.

Wide layouts are where you add columns, side-by-side positioning and extra spacing. Writing those inside min-width queries means:

• Fewer overrides, because you never set something just to reset it later.
• Easier debugging, because a rule either applies or it does not, and you rarely chase values set in one query and reset in another.
• Shorter cascades, because on a narrow screen the browser applies the base rules and skips the wide-layout blocks entirely.
• A safer fallback. If a media query fails to match for any reason, the user gets the simple single-column layout, which works everywhere.

Mobile-first is about priorities, not phones

Mobile-first started as a design idea: if you design for the smallest screen first, you are forced to decide what really matters on the page. That discipline benefits every screen size.

In CSS terms it does not mean "phones first". It means "the narrowest, simplest layout first". The same base styles serve a phone, a narrow browser window on a desktop, and a desktop zoomed to 400 percent.

Building a component mobile-first

Here is a card list that becomes a two-column, then three-column grid:

<ul class="card-list">
  <li class="card">
    <h2>Fast</h2>
    <p>Pages load quickly on slow connections.</p>
  </li>
  <li class="card">
    <h2>Flexible</h2>
    <p>The layout adapts to any screen width.</p>
  </li>
  <li class="card">
    <h2>Accessible</h2>
    <p>Content still works when zoomed.</p>
  </li>
</ul>

.card-list {
  display: grid;
  gap: 1rem;
  padding: 0;
  list-style: none;
}

.card {
  padding: 1rem;
  border: 1px solid #d0d7de;
  border-radius: 0.5rem;
}

@media (width >= 40rem) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width >= 64rem) {
  .card-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .card {
    padding: 1.5rem;
  }
}

Read the stylesheet from top to bottom and it tells a story: one column, then two, then three with more padding. Each query builds on the previous one because min-width queries overlap. At 70rem wide, both queries match, and the later one wins where they conflict.

Where to put media queries

There are two common styles:

1. Grouped at the end of the file, one block per breakpoint.
2. Next to the component they change, as in the example above.

Keeping queries next to the component is easier to maintain. When you edit .card-list, everything that affects it is in one place. Repeating @media (width >= 40rem) several times has no meaningful performance cost.

You can also nest a media query inside a rule with native CSS nesting, which is supported in all current major browsers:

.card-list {
  display: grid;
  gap: 1rem;

  @media (width >= 40rem) {
    grid-template-columns: repeat(2, 1fr);
  }
}

Converting a desktop-first stylesheet

If you inherit a desktop-first stylesheet, convert it one component at a time:

1. Look at the max-width query for the component. Its contents describe the small-screen layout.
2. Move those small-screen values into the base rule.
3. Move the original desktop values into a new min-width query.
4. Delete any declarations that only reset defaults, such as float: none or width: auto.
5. Test at narrow, medium and wide sizes before moving to the next component.

When max-width still makes sense

Mobile-first does not ban max-width queries. They are useful for a style that only applies to small screens and would otherwise need undoing, such as reducing the size of a very large heading on the narrowest phones. Use them as the exception, and keep the base styles simple.

Summary

• Mobile-first CSS puts small-screen styles in the base rules and adds wider layouts inside min-width queries.
• Normal flow already suits narrow screens, so the base layout needs few rules.
• Media queries that only add, never undo, give you less CSS and simpler debugging.
• Order min-width queries from smallest to largest and keep them near the component they change.
• Mobile-first is about priorities: decide what matters, then enhance as space grows.

In the next lesson you will learn media query syntax in full, including range syntax and user preferences.