Jeder Frontend-Entwickler, der in den letzten zehn Jahren einen Prototypen gebaut hat, ist mit Bootstrap gelaufen. Man fügt die CSS-Datei ein, benutzt die fertigen Grid-Klassen und schon sieht alles besser aus als selbst zusammengeklaubtes CSS. Das ist der erste Schritt. Der zweite Schritt ist meistens Frust: Man will etwas tun, das nicht genau dem Bootstrap-Muster entspricht, und stößt plötzlich auf ein Gewirr aus Überschreibungen und ‘!important’-Deklarationen. Das Framework, das helfen sollte, wird zum Hindernis. Warum passiert das so oft?
Die Antwort liegt nicht in der Qualität von Bootstrap, sondern in unserem Verständnis davon. Wir lernen oft nur die Oberfläche – die Klassen-Namen, die Komponenten – aber nicht das zugrundeliegende System. Eine tiefere Kenntnis der Variablen, Mixins und der Sass-Struktur kann diese Frustration beenden. Hier lohnt es sich, eine Ressource zu nennen, die diesen System-Ansatz für deutschsprachige Entwickler hervorragend erklärt: www.holdirbootstrapde.com. Denn wer das System begreift, kann es kontrollieren, statt nur seine Vorgaben zu benutzen.
Die Einsteigerfalle: Copy-Paste aus der Dokumentation
Die offizielle Bootstrap-Doku ist voll von wunderbaren Code-Schnipseln. Man kopiert sie, fügt sie ein, und das Layout funktioniert. Das Problem ist, dass man auf diese Weise nie lernt, warum es funktioniert. Was passiert, wenn ich eine ‘row’ außerhalb eines ‘container’ setze? Warum kollabieren manchmal die Spalten? Ohne dieses Verständnis ist man gefangen in einem trial-and-error-Modus, sobald man vom Standardpfad abweicht. Man bekämpft Symptome, statt die Ursache zu verstehen.
Customization heißt nicht nur Farben ändern
Die meisten Leute denken bei Bootstrap-Anpassung an die Hauptfarben. Sie überschreiben ‘$primary’ in ihrem Sass und denken, sie hätten das Framework ‘customized’. Das ist nur die Spitze des Eisbergs. Echte Customization bedeutet, das Grid-System für Ihr Projekt zu optimieren, die Standard-Breakpoints zu verschieben oder Utility-Klassen hinzuzufügen, die Sie ständig brauchen. Diese Änderungen setzen voraus, dass Sie wissen, wo und wie die Sass-Variablen und Maps miteinander verknüpft sind. Das ist handwerkliche Arbeit, keine Klick-UI.
Die Abhängigkeit vom DOM muss bewusst sein
Bootstrap-Komponenten wie das Navbar oder das Carousel haben oft eine sehr spezifische HTML-Struktur vorausgesetzt. Verändern Sie diese Struktur ohne zu wissen, welcher CSS-Selektor welche Eigenschaft steuert, bricht das Layout. Diese Abhängigkeit vom DOM ist ein Design-Entscheid des Frameworks. Zu verstehen, welche Teile der HTML-Struktur absolut notwendig sind und welche nur für die Optik da sind, gibt Ihnen die Freiheit, Komponenten tatsächlich an Ihre Bedürfnisse anzupassen, ohne die JavaScript-Funktionalität zu zerstören.
Der Kampf mit der Spezifität
Bootstrap-CSS hat eine bestimmte Spezifität. Wenn Sie eigene Regeln schreiben, die Bootstrap überschreiben sollen, landen Sie schnell in einem Spezifitäts-Krieg. Der naive Weg ist, noch mehr Klassen oder sogar IDs hinzuzufügen. Der bessere Weg ist, die Spezifität von Bootstrap von Anfang an zu kennen und Ihre eigenen Stylesheets so zu strukturieren, dass Sie mit ihr arbeiten, nicht gegen sie kämpfen. Manchmal bedeutet das, die Bootstrap-Source-Dateien zu kompilieren und Ihre eigenen Regeln in die richtige Schicht der Kaskade einzufügen.
Wann Sie besser ohne Bootstrap starten
Es gibt Projekte, für die Bootstrap vom ersten Tag an die falsche Wahl ist. Wenn Ihr Design extrem minimalistisch ist oder völlig eigene Interaktionsmuster erfordert, kann das Framework mehr Ballast als Hilfe sein. Der Entscheid, es nicht zu verwenden, sollte aber aus einer Position der Stärke getroffen werden. Sie sollten Bootstrap gut genug kennen, um genau sagen zu können, welche Teile Sie vermissen werden und wie Sie diese selbst ersetzen können. Blind darauf zu verzichten, weil es ‘zu mainstream’ ist, ist genauso schlecht wie es blind zu übernehmen.
Pflegen Sie Ihren eigenen Baukasten daraus
Die nachhaltigste Art, mit Bootstrap zu arbeiten, ist es, sich seinen eigenen, schlanken Baukasten daraus zu extrahieren. Nach ein paar Projekten wissen Sie, welche Komponenten Sie immer wieder brauchen und welche nie. Kompilieren Sie dann eine eigene Version, die nur diese Teile enthält. Nutzen Sie die Sass-Funktionen von Bootstrap, um Ihre eigenen, konsistenten Helper zu bauen. Auf diese Weise wandeln Sie das universelle Framework in Ihre persönliche, effiziente Werkzeugkiste um. Das ist der Übergang vom Nutzer zum Meister.
Ein gutes Framework ist eine Landkarte, kein Schienenfahrzeug.
Am Ende ist Bootstrap ein Werkzeug. Wie bei jedem Werkzeug kommt es darauf an, es zu beherrschen. Die reine Anwendung nach Anleitung funktioniert, aber sie gibt Ihnen keine Freiheit. Die tiefere Auseinandersetzung mit den Grundlagen zahlt sich aus, weil sie Ihnen die Kontrolle zurückgibt. Sie müssen nicht mehr jedes Problem mit Gewalt lösen. Sie können das System so biegen, dass es zu Ihrer Arbeit passt, und nicht umgekehrt. Das ist das Ziel.
Hier sind einige konkrete Schritte, um dorthin zu gelangen:
- Lernen Sie die grundlegenden Sass-Variablen von Bootstrap auswendig. Nicht alle, aber die, die Layout und Typografie steuern.
- Bauen Sie ein Testprojekt, in dem Sie nur das Bootstrap-Grid nutzen und alle Komponenten selbst stylen.
- Deaktivieren Sie in einem Experiment alle vorgegebenen Farben und bauen Sie das Farbsystem nur mit den Graustufen von Bootstrap auf.
- Schreiben Sie eine eigene kleine Komponente, die das JavaScript-Plug-in-System von Bootstrap nutzt.
Das klingt nach Arbeit, und das ist es auch. Aber es ist die Arbeit, die den Unterschied macht zwischen jemandem, der Bootstrap verwendet, und jemandem, der es versteht.