Co to jest strategia responsywna mobile-first i jak container queries się w nią wpisują?

Question

Accepted Answer

**Mobile-first** oznacza pisanie bazowych stylów dla **najmniejszego ekranu**, a następnie *dodawanie* złożoności dla większych ekranów za pomocą media queries `min-width` — zamiast zaczynać od wersji na pulpit i usuwać elementy.

## Mobile-first w praktyce

```css
/* base: mobile — single column, simple */
.layout { display: grid; gap: 1rem; }

/* enhance for tablet and up */
@media (min-width: 768px) {
  .layout { grid-template-columns: 1fr 2fr; }
}
/* enhance further for desktop */
@media (min-width: 1200px) {
  .layout { grid-template-columns: 1fr 2fr 1fr; }
}
```

**Dlaczego mobile-first wygrywa:** bazowy CSS pozostaje minimalny (urządzenia mobilne otrzymują tylko to, czego potrzebują — dobrze dla wydajności na słabszych urządzeniach), a ty *wartstwujesz* złożoność, co jest łatwiejsze do zrozumienia niż jej nadpisywanie/usuwanie. Zgadza się też z tym, jak zawartość naturalnie przepływa z jednej kolumny na wiele.

## Ograniczenia media queries

Media queries reagują na **viewport** — całe okno. Jednak komponent wielokrotnego użytku (powiedzmy karta) może pojawić się w szerokim obszarze głównym *lub* wąskim pasku bocznym na tej samej stronie. Szerokość viewport nie potrafi powiedzieć Ci, ile miejsca ma *komponent* w rzeczywistości.

## Container queries rozwiązują ten problem

```css
.card-wrapper {
  container-type: inline-size;  /* declare it a query container */
}

/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: auto 1fr; }
}
```

Teraz ta sama karta automatycznie przełącza się na układ poziomy, ilekroć *jej kontener* ma ≥400px — niezależnie od tego, czy to dlatego, że ekran jest duży, czy dlatego, że znajduje się w szerokim obszarze. Komponent staje się naprawdę **niezależny od kontekstu i wielokrotnie używalny**.

## Uzupełniają się nawzajem

- **Media queries** — układ na poziomie strony, globalne punkty przerwania, preferencje użytkownika (tryb ciemny, zmniejszony ruch).
- **Container queries** — responsywność na poziomie komponentu dla komponentów wielokrotnego użytku.

## Dlaczego to ważne

Mobile-first utrzymuje responsywny CSS oszczędny i łatwy do utrzymania.

Container queries są znaczącym postępem: pozwalają komponentom reagować na *ich własną* dostępną przestrzeń, co jest dokładnie tym, czego potrzebujesz w architekturze opartej na komponentach (design systems, wielokrotnie używane karty/widżety), gdzie ten sam komponent pojawia się w wielu kontekstach.