Ein CSS-Framework ist eine Sammlung vorgefertigter CSS-Regeln, auf der die Gestaltung einer Website aufbaut. Es bringt ein Raster für Layouts, einheitliche Abstände und Schriftgrößen und oft fertige Bausteine wie Buttons, Formulare und Navigation mit.
- CSS-Framework
Eine Bibliothek aus CSS-Klassen und Voreinstellungen, die Layout und wiederkehrende Gestaltungsaufgaben vorab löst.
Beispiel: „Für das Kundenportal haben wir ein CSS-Framework genommen, damit Raster und Formulare nicht von Grund auf entstehen.“Verwandt: Framework. Ein CSS-Framework gibt nur Gestaltungsregeln vor und steuert keinen Programmablauf.
Welche Arten von CSS-Frameworks es gibt
Komponenten-Frameworks wie Bootstrap, Bulma oder Foundation liefern fertige Bausteine mit eigener Optik. Man schreibt button button-primary, und der Button ist gestaltet.
Utility-first-Frameworks wie Tailwind CSS liefern dagegen viele kleine Klassen, die je eine Eigenschaft setzen, und die Bausteine entstehen erst im Projekt. Das Prinzip dahinter erklärt Utility-first CSS.
Was ein CSS-Framework bringt
Tempo und Einheitlichkeit. Raster, Abstände und Bildschirmbreiten sind durchdacht und getestet, und mehrere Leute im Team gestalten nach denselben Regeln. Für Verwaltungsoberflächen und Prototypen ist ein Komponenten-Framework oft der schnellste Weg zu etwas Brauchbarem.
Der Preis ist Gewicht oder Gleichförmigkeit. Ungenutzte Regeln landen ohne Bauschritt in der CSS-Datei, und Seiten mit unveränderten Voreinstellungen sehen einander ähnlich.
Welches CSS-Framework passt
Für eine Website mit eigener Marke eher eines ohne vorgegebene Optik, also Utility-first oder ganz eigenes CSS. Für interne Werkzeuge ein Komponenten-Framework. Diese Website ist mit Tailwind CSS gestaltet.
Wichtiger als die Wahl selbst ist, dass sie im Projekt durchgehalten wird. Zwei CSS-Frameworks nebeneinander, etwa ein altes Bootstrap im Kundenbereich und Tailwind CSS auf den neuen Seiten, verdoppeln das CSS und führen zu Regeln, die sich gegenseitig überschreiben.