Bootstrap und andere Frameworks

Ich bin auch ein Fan von schön gestalteten Webseiten, die mittlerweile seit langem mit Bootstrap oder anderen Frameworks umgesetzt werden. Nach anfänglichen Versuchen so etwas komplett ohne ein solches Framework zu „basteln“, bin ich vor längerer Zeit für eigene Webprojekte auch zu Bootstrap übergegangen. Die Ergebnisse sehen einfach besser aus und man selber ist viel zu lange damit beschäftigt etwas zu erstellen, das am Ende nur halb so gut aussieht und mindestens doppelt so viel Zeit verschlungen hat. Eine Sache ist mir dabei aber, anfangs gar nicht so bewusst, mittlerweile doch ein Dorn im Auge, die ich in diesem Artikel näher beschreiben möchte.

Zwar ist Kritik an so einem Framework, mit dem man viel großartiges auf eigentlich einfache Weise umsetzen kann, vielleicht nicht ganz angebracht, aber es ist auch eher eine grundsätzliche Sache:

Die eigentliche Trennung zwischen html, also der Struktur der Seite, und CSS, der grafischen Gestaltung der Seite, ist meiner Meinung nach durch Bootstrap und andere Frameworks wieder erheblich aufgebrochen worden, wenn nicht sogar komplett aufgeweicht.

Wo ganz zu Anfang des Webs die CSS-Informationen noch lustig direkt in den html-Code in den jeweiligen Tag geschrieben wurden, so schmeißt man heute mit hunderten CSS-Klassen um sich, um z. B. auf Style-Angaben aus dem Bootstrap-CSS zu verweisen oder verschiedene Style-Angaben zu kombinieren. So haben manche html-Elemente mittlerweile 4 oder 5 Klassen und auch noch eine ID. Mehr oder weniger steuert man das Aussehen nun doch innerhalb des html-Codes. Nur heute dann halt durch die Angabe von x-beliebig vielen Klassen.

Persönlich finde ich, dass ein html-Quellcode wie folgt wesentlich aufgeräumter aussah:

… als mit Bootstrap:

Altes Konzept?

In einigen html-Kursen die ich mir vor langer langer Zeit angesehen habe, wurde mehr oder weniger folgendes gepredigt:

IDs sind für Elemente, die auf der Seite nur einmal auftauchen gedacht, um sie eindeutig zu identifizieren, beispielsweise header und footer.

Klassen sind für Elemente die mehrmals auf der Seite auftauchen können, beispielsweise eine Textfläche, die von anderen abgegrenzt ist oder links positionierte Bilder oder dergleichen.

Die Steuerung des Aussehens erfolgt dann anhand der ID oder Klasse in der CSS-Datei. Indem man aber immer mehr Klassen miteinander kombiniert, wird das irgendwie schnell sehr unübersichtlich, zumindest meiner Meinung nach. Klar konnte man dem header beispielsweise auch noch Klassen mitgeben, aber wozu? Dieser taucht nur einmal auf der Seite auf, wird also nicht in unterschiedlicher Ausprägung vorkommen und man kann einfach alle ihn betreffenden Style-Informationen an die ID pappen.

Alles einfacher?

Gerade bei Bootstrap-Templates, wenn ich mir diese herunterlade und anschaue, muss ich mit Erschrecken feststellen, dass diese selten viele Gemeinsamkeiten mit den anderen Templates aufweisen. Dort tauchen so viele andere Klassen auf, dass man quasi immer fast bei Null anfängt, wenn man versucht sich in einem anderen Template zu recht zu finden und irgendeine Banalität, wie eine Farbe, abzuändern. Vielleicht geht es auch nur mir so, aber leichter ist es dadurch nicht unbedingt geworden. Zumindest nicht dann, wenn man das nicht den ganzen Tag macht…

Vor Jahren hat man sich von der Verwendung von Tabellen als Gestaltungsgrundlage zu recht verabschiedet, weil Jahre lang einfach niemand mit div-tags umgehen konnte. Jetzt packt man den Inhalt intelligent in „Boxen“ nebeneinander. Meiner Meinung nach läuft man hier wieder irgendwie in die andere Richtung und verschmelzt Struktur und Gestaltung, was bei Responsive-Design wahrscheinlich gar nicht anders möglich ist, sehr eng miteinander.

Wenn ich mir allerdings vorstelle, ich hätte ein großes Projekt, das nicht im geringsten auf irgendeine Weise mit einer Art CMS bzw. einem intelligenten Skript im Hintergrund aufgebaut ist, sondern jede Seite einzeln als html-Datei ohne includes oder sonstiges beinhaltet, dann kommen mir Erinnerungen daran hoch, wie mein Vater damals mehrmals bei seiner tausende html-Dateien umfassenden Webseite in jeder Datei den Inhalt des Headers verändert hat. Wenn man etwas am Styling ändern muss, wofür man dann eine andere CSS-Klasse verwenden muss, stände man bei Bootstrap vor dem gleichen Dilemma wie mein Vater damals und müsste jede Seite anpassen. Nur dass man es etwas intelligenter per Search & Replace, wie in diesem Artikel gezeigt, anpassen könnte. Aber richtig „geschickt“ ist das nicht.

Letzt endlich landet man dann bei einem zusätzlichen Custom-Bootstrap-CSS-File, in welchem man alle möglichen Klassen so überschreibt, dass die Webseite optisch den eigenen Anforderungen entspricht. Hierdurch bläht sich das ganze Gerüst aber mehr und mehr auf und es wird nicht grade übersichtlicher, da man in dieser Datei immer nur Fetzen aus dem eigentlichen Satz an CSS-Regeln überschreibt. Ich handhabe das auch so, da dies anscheinend so gewünscht ist und es außer der nicht zu empfehlenden Änderung des Bootstrap-CSS keinen wirklichen anderen Weg gibt.

Fazit

Grundsätzlich kann man sich, denke ich, die Frage stellen, gerade wenn jemand heutzutage erst anfängt sich in html und Co. einzuarbeiten, ob das Konzept der Trennung von Gestaltung und Struktur bzw. Inhalt heute überhaupt noch haltbar ist und ob man dieses noch beherzigen sollte, oder dieses direkt ganz übergehen sollte? Wenn ich jemandem heute das Erstellen einer Webseite beibringen sollte, würde ich vielleicht nur noch erwähnen, dass man das mal so gehandhabt hat, aber wirklich länger würde ich mich mit diesem „alten“ Konzept vermutlich nicht mehr aufhalten.