It’s #FrontendFriday – Styled Components ein Überblick
Besonders in der React Entwicklung kommt immer häufiger das Thema Styled Components auf. Im nachfolgenden Blog wird das Thema näher betrachtet, in dem ein Überblick über die Kernfunktionalitäten geschaffen und ein Beispiel aufgezeigt wird.
Was sind eigentlich Styled Components?
Styled Components, nachfolgend SC genannt, sind eine Form des CSS-in-JS und bieten einen strukturierten Ansatz, CSS-basiertes Styling auf Komponentenbasis zu definieren. Dazu werden Komponenten erweitert und mit den gewünschten CSS Eigenschaften beschrieben. Die Styles in Form von CSS müssen nicht mehr während der Entwicklung auf Komponenten oder Klassenebene separat gemappt werden, sondern werden direkt über die Bibliothek generisch erzeugt.
Das Styling ist weiterhin klar getrennt von funktionalen und – / oder State behafteten Komponenten und fügt sich in die React- / Vue Architektur klar ein. Angular wird nicht unterstützt.
Welche Kernfunktionalitäten bietet die Bibliothek?
- Lazy Loading
- Durch Code Splitting und die direkte Komponentenzuordnung kann völlig automatisch nur das benötigte CSS geladen werden.
- Klassennamen / Duplikate
- Klassennamen müssen nicht mehr erstellt werden, da dieser Prozess von der Bibliothek übernommen wird. Dadurch kann es auch nicht mehr zu Duplikaten kommen.
- Statische Codeanalyse
- Ungenutzter Code wird bereits auf Komponentenebene sichtbar und kann ggfs. direkt entfernt werden.
- Dynamisches Styling
- Das Styling kann direkt auf Basis von Properties oder einem globalen Design angepasst werden.
- Einfachere Wartung
- Da das Styling direkt in der Komponente liegt, müssen Entwickler:innen nicht mehr nach der jeweiligen CSS Klasse suchen und ggfs. mehrere Dateien analysieren.
Ein Beispiel mit Styled Components
Das nachfolgende Bild zeigt die beispielhafte Erstellung von zwei React Komponenten mit SC. Bei den Komponenten handelt es sich um einen gewöhnlichen <h1> sowie einen <section> Tag. Diese Komponenten werden direkt mit CSS gestyled. Hierbei wird bereits ersichtlich, dass keinerlei Klassennamen oder IDs vergeben werden.
Die bereits gestylten Tags können nun nach React Standard in die render Methode integriert werden.
Und werden anschließend im HTML wie nachfolgend automatisch generiert.
State of the Art oder nicht?
Als State of the Art lässt sich die SC Bibliothek für React Anwendungen nicht bezeichnen. In der React Styling Anleitung selbst befindet sich zwar ein kurzer Ausschnitt zum Thema CSS-in-JS aber konkrete Referenzen / Verlinkungen auf diverse Bibliotheken gibt es dazu nicht. Viel mehr wird Standard CSS in eigenen CSS-Dateien empfohlen.
Eine Betrachtung der Weekly Downloads aus NPM verglichen mit alternativ Bibliotheken zeigt folgende Werte:
| Anwendung | Weekly Downloads |
| React | 13.000.000 |
| Vue | 2.500.000 |
| CSS-in-JS Bibliotheken | Weekly Downloads |
| Styled Components | 3.000.000 |
| Emotion | 600.000 |
| Aphrodite | 100.000 |
| Radium | 65.000 |
| CSS-not-in-JS Bibliotheken | Weekly Downloads |
| Scss / Sass | 6.000.000 |
| Less | 3.000.000 |
Hier zeigt sich deutlich, dass die meisten Entwickler, welche CSS-in-JS verwenden auf SC setzen. Selbst im Vergleich mit CSS-not-in-JS schlägt sich SC sehr gut, da zu beachten ist, dass diese auch von anderen Webframeworks genutzt werden.
SC bieten gute Lösungsansätze für diverse Probleme in der CSS Welt. Mit 3.000.000 Downloads die Woche, gilt es als einer der beliebtesten Styling Bibliotheken für React Anwendungen. Vor allem die Problemstellungen: Globale Reichweite in CSS, Erkennung von ungenutztem Code sowie die Vermeidung von CSS-Klassen Duplikaten, werden durch die Kernfunktionalitäten gut gelöst. Für Angular Anwendungen lässt sich die SC Bibliothek nicht nutzen. Als Alternative für Angular können Component Styles, verwendet werden. Der Einsatz von SC kann unabhängig vom Skill-Level der Entwickler:innen empfohlen werden, wenn die Anwendung auf Vue, JS oder React basiert und die Kernfunktionalitäten die Problemstellungen im Projekt gut abdecken.
Mehr zu Java Programmierung erfahren
Quellen:
https://styled-components.com/
https://www.iamtimsmith.com/blog/how-to-use-styles-in-a-react-js-application
