Mobile-first bedeutet, deine Basis-Styles für den kleinsten Bildschirm zu schreiben und dann Komplexität für größere Bildschirme mit min-width Media Queries hinzuzufügen — anstatt bei Desktop zu starten und Dinge wegzunehmen.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Warum Mobile-first gewinnt: Basis-CSS bleibt minimal (Mobile bekommt nur das, was es braucht — gut für die Performance auf schwächeren Geräten), und du baust Komplexität aufeinander auf, was leichter zu verstehen ist, als sie zu überschreiben/zu entfernen. Es entspricht auch der natürlichen Weise, wie Inhalte von einer auf viele Spalten reflowed werden.
Media Queries reagieren auf den Viewport — das ganze Fenster. Aber eine wiederverwendbare Komponente (etwa eine Card) könnte in einem breiten Hauptbereich oder einer schmalen Seitenleiste auf derselben Seite vorkommen. Die Viewport-Breite kann dir nicht sagen, wie viel Platz die Komponente tatsächlich hat.
.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; }
}
Jetzt wechselt dieselbe Card automatisch zu einem horizontalen Layout, sobald ihr Container ≥400px ist — egal ob das daran liegt, dass der Bildschirm groß ist oder weil sie in einer breiten Spalte ist. Die Komponente wird wirklich kontextunabhängig und wiederverwendbar.
Mobile-first hält responsive CSS schlank und wartbar.
Container Queries sind ein großer Fortschritt: Sie ermöglichen es Komponenten, auf ihren eigenen verfügbaren Platz zu reagieren, was genau das ist, was du in einer komponentenbasierten Architektur brauchst (Design Systems, wiederverwendbare Cards/Widgets), wo dieselbe Komponente in vielen Kontexten auftaucht.