molily: Welches CSS Framework macht Sinn

Beitrag lesen

Hallo!

Frameworks bieten Lösungen für häufige Layouts und nivellieren Browserunterschiede. Sie setzen meist Default-Styles für verschiedene Elemente (über Reset-Stylesheets bzw. normalize.css) und etablieren typografische Grundregeln. Sie bringen auch Helfer mit, um anpassungsfähige (responsive) Layouts zu erstellen. Viele Frameworks folgen dem Mobile-First-Paradigma, Anpassungsfähigkeit ist also schon eingebaut und man muss bei jeder Mehrspaltigkeit angeben, für welche Viewport-Größen sie gilt bzw. muss für die Serialisierbarkeit sorgen.

Darüber hinaus sind Frameworks wie Bootstrap eine Sammlung von fertigen UI-Komponenten (Buttons, Listen, Menüs, Tooltips, Tabs, Formulare usw.). Sie bringen schon ein vordefiniertes Design mit, das bestenfalls in einer Theme-Datei steckt und auswechselbar ist. Manche Frameworks sind mehr Baukasten (z.B. YAML), andere eher fertige Bibliotheken (z.B. Bootstrap), bei denen nur noch dutzende Klassen im HTML gesetzt werden müssen.

Wenn du mit den Default-Styles von Bootstrap zufrieden bist und die fertigen Interface-Komponenten verwenden kannst, so bietet sich dessen Benutzung an. Im Grunde werden dann nur Klassen im HTML gesetzt, es ist wenig Styling nötig. Für viele kleinere Projekte, die gute UI-Defaults, ein anpassungsfähiges Layout und kein besonders individuelles Design brauchen, führt das zu schnellen Resultaten.

Wie du schon gelesen hast, ist das bei großen Projekten schwer wartbar (siehe auch). Es tobt gerade eine große Debatte in der CSS-Welt, ob es sinnvoll ist, viele Klassen mit Präsentationsnamen im HTML unterzubringen. Da werden beide Extreme vertreten. Ein möglicher Mittelweg wird in dem von dir genannten Artikel beschrieben.

Das führt uns zu Sass, Less und andere Präprozessoren. Diese erweitern CSS um Features wie Variablen, Mixins, abstrakte Klassen und Funktionen. Die Benutzung von Sass oder Less würde ich jedem empfehlen. Die meisten Frameworks basieren sowieso darauf, sodass man direkt den »Quellcode« verwenden kann und diesen einfacher anpassen und Module daraus verwenden kann. Ich verwende Bootstrap nicht häufig, aber ich vertrete ebenfalls den Ansatz, dass Styling-Module im Präprozessor kombiniert werden sollten.

Zu Sass habe ich drei Artikel geschrieben, die ich jedem ans Herz lege:
http://webkrauts.de/artikel/2011/effiziente-css-entwicklung-mit-sass-und-compass-teil-1
http://webkrauts.de/artikel/2011/effiziente-css-entwicklung-mit-sass-und-compass-teil-2
http://webkrauts.de/artikel/2012/css-modularisierung-mit-sass

Im letzten Artikel stelle ich vor, wie man OOCSS mit @extend und Placeholder Selectors (»abstrakte Klassen«) umsetzen kann. Diese Technik verwende ich sehr häufig, allerdings istsie mit Vorsicht zu genießen; der produzierte CSS-Code nicht immer sehr effizient. Sie ist mit normalen OOCSS-typischen, wiederverwendbaren Klassen und Mixins zu kombinieren.

Grüße,
Mathias