Welches CSS Framework macht Sinn

[M.]

Mahlzeit,
ich lese mich grad in CSS-Frameworks ein, weil ich mir die Arbeit bei Frontends vereinfachen will. Es geht dabei um relativ einfache Frontends für mein Framework, die Komplexen Dinge baue ich anschliessend eh per Hand ein, falls das Framework das nicht mehr hergibt.

Bootstrap schaut ja recht gut aus, aber ich hab da auch schon Gegegenstimmen gelesen,wie z.B. hier
Auf der Seite wird dann Sass empfohlen, was anscheinend sauberer HTML5 integriert.

Was haben diese Frameworks für Vor- und Nachteile?

Und ja, ich weiss, dass ich das CSS auch direkt von Hand schrieben kann, das ist aber nicht meine Frage.

Welche Erfahrungen gibt es hier zum Thema?

[1UnitedPower]

Meine Herren,

Bootstrap schaut ja recht gut aus, aber ich hab da auch schon Gegegenstimmen gelesen,wie z.B. hier
Auf der Seite wird dann Sass empfohlen, was anscheinend sauberer HTML5 integriert.

Bootstrap und SASS sind konzeptionell schlecht zu vergleichen. Bootstrap ist eine Sammlung von Stilen. SASS ist eine Stylesheet-Sprache, die zu CSS transpiliert wird. Bootstrap hilft dir beim Layouten und Designen während SASS dir hilft deine Stylesheets zu organisieren und die Übersicht zu behalten.

In dem Artikel, den du verlinkt hast, spricht sich der Autor übrigens nicht gegen Bootstrap aus, sondern doch gerade dafür. Er empfiehlt Bootstrap in Kombination mit SASS zu benutzen. Auf diesem Weg ist es möglich, die präsentationsbezogenen Klassennamen von Bootstrap aus dem HTML-Dokument herauszuhalten und trotzdem dessen Stile nutzen zu können.

[M.]

Bootstrap und SASS sind konzeptionell schlecht zu vergleichen. Bootstrap ist eine Sammlung von Stilen. SASS ist eine Stylesheet-Sprache, die zu CSS transpiliert wird. Bootstrap hilft dir beim Layouten und Designen während SASS dir hilft deine Stylesheets zu organisieren und die Übersicht zu behalten.

Nach dem Einlesen bin auf sowas gekommen. Wobei ich momentan soweit bin, dass mir beides zu aufgebläht ist. Aber ich schau mir mal Sass näher an, weil ich viele verschiedene Templates habe, die alle ne gemeinsame Basis haben. Da würde Sass bestimmt Sinn machen.

In dem Artikel, den du verlinkt hast, spricht sich der Autor übrigens nicht gegen Bootstrap aus, sondern doch gerade dafür. Er empfiehlt Bootstrap in Kombination mit SASS zu benutzen. Auf diesem Weg ist es möglich, die präsentationsbezogenen Klassennamen von Bootstrap aus dem HTML-Dokument herauszuhalten und trotzdem dessen Stile nutzen zu können.

Ich muss den Artikel nochmal lesen, da hab ich eindeutig beim Überfliegen was falsch verstanden.

Danke auf jeden Fall für deine Ausführungen :)

[molily]

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

[M.]

Danke, jetzt hab ich erstmal Lesestoff :)