Utility-First CSS ist ein Vorgehen, bei dem viele kleine Klassen je eine Eigenschaft setzen und die Gestaltung im Markup zusammengesetzt wird.
- Utility-First CSS
Vorgehen, bei dem die Gestaltung aus vielen kleinen Klassen zusammengesetzt wird, die je eine Eigenschaft setzen.
Beispiel: „Utility-First CSS verlagert die Gestaltung vom Stylesheet ins Markup.“
Wie es aussieht
<div class="flex items-center gap-4 p-6 rounded-lg bg-white">Jede Klasse steht für eine Angabe. Das Stylesheet wird kaum noch angefasst, gestaltet wird im Markup. Bekanntester Vertreter ist Tailwind CSS.
Die Abwägung
Dafür spricht, dass keine Namen erfunden werden müssen und das Stylesheet nicht wächst. Dagegen spricht, dass sich Wiederholungen ins Markup verlagern und Vorlagen unruhig aussehen. In der Praxis entscheidet, ob es eine Komponentenebene gibt, in der sich die Klassenketten bündeln lassen.