Weg vom UI-Kit: 4 Tipps zum Einsatz komponentengesteuerter CSS-Frameworks
Kommentare

Für fast jede mögliche Aufgabe bei der Webentwicklung gibt es das passende Framework. Allerdings lässt sich seit einiger Zeit beobachten, dass immer mehr Frontend-Entwickler von der Nutzung eines Frameworks, das das Schreiben von Code für sie erledigt, Abstand nehmen – nicht zuletzt, weil Webkomponenten derzeit stark an Verbreitung zunehmen und viele Frameworks Schwierigkeiten im Umgang mit ihnen haben.

Das ist aber nicht das einzige Problem. Vinay Raghu erklärt, warum Frontend-Entwickler komponentengesteuerte CSS-Frameworks brauchen und nennt vier Beispiele, bei denen Entwicklern beim Erstellen ihres Codes freie Hand gelassen wird.

CSS-Framework oder UI-Kit?

Die meisten Frontend-Entwickler dürften mit der Arbeit mit Frameworks wie Bootstrap oder Foundation vertraut sein – und dementsprechend auch die möglichen Einschränkungen beim Entwickeln mit Web-Components kennen. Das Problem dabei ist vor allem, dass die beliebtesten CSS-Frameworks mit zahlreichen vorgefertigten Styles daherkommen und so das passende Framework für alle sein wollen.

Solche UI-Kits stellen Entwicklern alles, was für ein Projekt benötigt werden könnte – sei es Designs, Strukturen, Standards, Patterns oder JavaScript-Plug-ins – zur Verfügung. Für Projekte, bei denen kein Code von Grund auf neu geschrieben werden soll, ist das zwar gut geeignet, allerdings ist die anschließende Individualisierung oft nicht einfach. Dazu kommt, dass solche Frameworks meist viel Code mit sich bringen, den man für sein Projekt eigentlich nicht braucht.

Komponentengesteuerte CSS-Frameworks dagegen sollen nur ein Startpunkt für das Design sein – nicht mehr, aber auch nicht weniger. Daher gibt es dort keine vorgefertigten Styles, HTML-Strukturen, Klassen oder Einschränkungen bei den Markups.

4 Framework-Tipps zum Code selber schreiben

Angesichts der zahlreichen Frameworks auf dem Markt gibt es natürlich auch Frameworks, die ohne vorgefertigte Styles daherkommen und Entwicklern so zahlreiche Möglichkeiten für das Selberschreiben von Code bieten. Vinay Raghu nennt zum Beispiel:

Pattern Lab

Eigentlich ist Pattern Lab weniger ein Framework, als eine Methodik, um Architekturen für Websites und Applikationen von Grund auf zu erstellen. Dabei ermutigt Pattern Lab Entwickler, mit einem Grund-Markup anzufangen und sich von dort seinen Weg zu komplexeren Komponenten zu erarbeiten, ohne ihnen CSS-Styles vorzugeben. Zudem kann man jeden Präprozessor mit dem Framework nutzen, da – im Gegensatz zu vielen anderen Frameworks – kein bestimmter Präprozessor vorgeschrieben wird.

SUIT CSS

Auch SUIT CSS ist eigentlich eine Methodik für die Komponenten-basierte-UI-Entwicklung, die vor allem darauf abzielt, Komponenten erstellbar und konfigurierbar zu gestalten. Dafür stehen verschiedene Richtlinien zur Verfügung, die die Implementierung und Anordnung von lose gekoppelten, unabhängigen Einheiten erlauben.

inuitcss

inuitcss ist ein Framework, dessen Fokus auf der Skalierbarkeit einer Website oder Applikation liegt. Es wurde als Style-agnostisches Framework designt, das die Grundlage für das selbst erstellte CSS bilden soll, ohne, dass das Framework individualisiert oder überschrieben werden muss. Genauso erlaubt inuitcss, Komponenten mit Namespaces zu versehen.

Pure CSS

Weder UI-Kit noch Framework ist Pure CSS, das zwar ein grundsätzliches Style-Set zur Verfügung stellt, dem Nutzer aber erlaubt, von dort aus eigene Applikations-Styles zu schreiben. Dabei sollen dem Nutzer möglichst viele Freiheiten gelassen werden; zudem ist das Aufheben von Styles leicht möglich.

Webkomponenten sind bereits jetzt aus der Frontend-Entwicklung nicht mehr wegzudenken, allerdings können viele der beliebtesten Tools nicht oder nur schlecht damit umgehen. Natürlich hängt die Wahl von der Art des Projekts ab, denn nicht jedes Tool ist für jedes Projekt geeignet. Allerdings könnte es an der Zeit sein, auch mal über den Tellerrand des Lieblingsframeworks hinaus zu schauen und neue Tools auszuprobieren.

Aufmacherbild: Electronic Components mix, for SMD and THT assembly von Shutterstock / Urheberrecht: Jan Jirous

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -