In diesem Beitrag werden wir folgende Punkte anschauen:
- Was ist ein CSS Framework?
- Unterschiedliche Projektphasen mit einem Framework
- Erweiterung eines Frameworks mit einer CSS Methodology
Was ist ein CSS Framework?
CSS Frameworks sind projektunabhängige Baukastensysteme. Das Ziel der Frameworks ist, einen möglichst universellen Lösungsansatz für unterschiedlichste Layouts anzubieten. Bekannte Frameworks sind Bootstrap oder Foundation. CSS Framewoks kommen meist mit fertig gestalteten Komponenten wie Grids, Buttons, Modals, Breadcrumbs und so weiter…
Vorteile eines Frameworks
- Die Komponenten von bekannten und frei verfügbaren Frameworks sind meist sehr gut getestet und funktionieren in allen Browsern
- Frameworks ermöglichen den schnellen Start der Entwicklung mit vielen vorhandenen Komponenten
- Dank guter Dokumentationen kann das Team schneller an neuen Features arbeiten
Nachteile eine Framework
Frameworks bringen gewisse Designvorgaben mit, d.h. Designer und Entwickler müssen sich diese Restriktion fügen.
In einem Framework gibt es sehr viel mehr Features als man meist braucht. All diese Features bedeuten Lernaufwand und Komplexität.
Unterschiedliche Projektphasen mit einem Framework
Die Prototyp Phase
Für den Beginn der Arbeit bieten die Framework Autoren einen CDN-Link, der sich schnell verwenden lässt. Dieser Ansatz ist für eine Prototyp Phase sehr gut geeignet und hilft bei einer schneller Umsetzung sowie einer frühen Demo.
Die MVP Phase
Für die Umsetzung von Projekten ist es allerdings besser mit den Ausgangsdateien von einem Framework zu arbeiten. Diverse Framework Autoren bieten ein Anpassungs-System an, das die Zusammenstellung von benötigten Komponenten anbietet. Alternativ holt man sich den Quellcode direkt von github.
Durch die Verwendung vom Ausgangscode und SASS können wir das Framework in unseren Build Process einbauen. Die Einstellungsdateien erlauben die Farben, Abstände, Typografie sowie weitere Design Elemente zu konfigurieren.
Wachstum Phase – Continuous Iteration
Im Lebenszyklus eines Projekts sollte es möglich sein, nicht mehr notwendige, veraltete Komponenten zu entfernen oder mit eigenen Komponenten zu ersetzen um so die Codebase ständig zu erweitern. Für diese Anforderungen werden wir eine CSS Methodology und Naming Convention verwenden.
Erweiterung von einem Framework mit den CSS Methodologien BEM und ITCSS
Die Methodik (von griechisch methodikè téchne = die Kunst des Weges zu etwas hin)
Was ist BEM?
Block Element Modifier eher verbreitet als BEM, ist eine class naming convention. Mehr dazu in folgendem Artikel: Getting the best out of BEM with SASS (englische Sprache)
Was ist ITCSS?
ITCSS steht für Inverted Triangle CSS und ist eine Hilfe für die Kategorisierung und Organisation des Codes. Es Löst die Probleme des globalen CSS, Specificity und Cascade. ITCSS lässt sich leicht mit anderen Frameworks kombieren. Für mehr Informationen empfehle ich den Artikel von Lubos Kmetkolesen: ITCSS: Scalable and Maintainable CSS architecture
Fazit
Vorteile eines eigenen CSS Frameworks und einer eigenen CSS Methodology
- Durch die Modularität werden Fehlerquellen schneller identifiziert
- CSS Cascade und Specificity sind unter Kontrolle
- Gestaltungsraster und strukturelle Objekte sind klar getrennt
- BEM Naming Convension sorgt für die Verständlichkeit und Wiederauffindbarkeit
- Es ist klar, wie man neuen Code kategorisiert und an der richtigen Stelle im Projekt platziert
- Durch die Kombination von Komponenten können neue Komponenten entstehen
- Framework Komponenten können mit der Zeit durch eigene Lösungen ersetzt werden
Nicht vergessen: CSS ist ein grosser Teil einer Webseite oder einer WebApp; Struktur zu behalten erfordert ständige Disziplin.
Mit einem gut strukturierten CSS lässt sich zunehmend leichter arbeiten, je grösser es wird.
