Für gewöhnlich wird CSS via Stylesheet und hin und wieder sogar inline in das jeweilige Projekt integriert. Praktisch geschieht es aber immer häufiger, dass eine sogenannte CSS-in-JS-Bibliothek zum Einsatz kommt. Die erlaubt es CSS auf Komponentenebene zu integrieren, was vor allem bei größeren Projekten viele Vorteile mit sich bringen kann.
Wo die CSS-Präprozessoren (LESS, SASS) einst für mehr Möglichkeiten in CSS sorgten, indem sie Variablen einführten und neue Herangehensweisen boten, die in CSS bis dato unbekannt waren, liefern die CSS-in-JS-Bibliotheken nun erneut einen frischen Ansatz. Und zwar ohne Rücksicht auf Verluste und ohne auf irgendwelche Standards seitens CSS zu achten. Zum Glück!
Was ist CSS in Javascript?
Mit CSS in Javascript oder auch CSS-in-JS wird eine Technik bezeichnet, bei der Javascript für die Gestaltung eingesetzt wird, statt klassische CSS-Dateien. Im Parsing generiert Javascript dann das finale CSS und fügt es in den eigentlichen DOM ein.
Praktisch ist CSS in Javascript, weil es eine andere Herangehensweise beinhaltet. Hier kann CSS-Code direkt innerhalb vom Code angelegt werden, um dort dann auch nur bestimmte Bereiche zu betreffen. Genutzt wird CSS in Javascript unter anderem von Reddit, GitHub, Coinbase und anderen populären Diensten.
Der tatsächliche Einsatz hängt schlussendlich aber auch von der verwendeten CSS-in-JS-Bibliothek ab. Es gibt unter anderem Framework-agnostische Bibliotheken ebenso wie jene, die beispielsweise gezielt React voraussetzen.
Welche Vorteile bringt CSS in Javascript?
Skaliertes CSS sollte direkt am Anfang ein Stichwort sein. CSS-in-JS-Bibliotheken erzeugen außerdem automatisch einzigartige Klassennamen. Stile sind zudem auf die jeweilige Komponente beschränkt, was zur Kapselung führt. Spezifitätskollisionen gehören damit der Vergangenheit an, da jeder Stil an die entsprechende Komponente gekapselt ist. In der komponentenbasierten Entwicklung ist das viel wert.
Ebenso kann die Leistung eine Rolle spielen, da CSS-in-JS-Bibliotheken nur die Stile laden, die gerade tatsächlich in Gebrauch sind. Das vermeidet unnötige Aufrufe und Wartezeiten. Inline-Styles sind ebenfalls ausgeschlossen, da die meisten CSS-in-JS-Bibliotheken diese unterbinden. Das ist wichtig, weil Inline-Styles weniger performant als Klassennamen in Erscheinung treten.
In den meisten CSS-in-JS-Bibliotheken werden die Vendor-Prefixes automatisch gesetzt. Bei nicht standardisierten CSS-Syntax erspart das jede Menge Arbeit. Vorteile gibt es also mehr als genug, vor allem bei sehr großen Projekten.
Nachteile von CSS in Javascript
Selbstverständlich gibt es auch einige Nachteile, die CSS in Javascript konsequenterweise mit sich bringt. Zum Beispiel kann der Vorteil, dass keine einzelne Datei mehr notwendig ist, gleichzeitig ein Nachteil sein. Schließlich ist es mitunter praktisch, wenn bestimmte CSS-Regeln mal eben über das Stylesheet korrigiert oder angefasst werden können, ohne das große Ganze bearbeiten zu müssen.
Auch ein Stylesheet für mehrere Projekte gleichzeitig ist nicht möglich. Und weil es nicht länger semantische Klassennamen gibt, sind sämtliche CSS-Befehle zudem nicht mehr ohne Weiteres verständlich. Außerdem muss eine CSS-in-JS-Bibliothek geladen werden, die vorher gar nicht notwendig war. Auch dies kann, je nach Projekt, eine Verschlechterung der Performance mit sich bringen.
Dann wäre da noch die Tatsache, dass CSS in Javascript nicht exakt so funktioniert, wie wir das von klassischem CSS gewohnt sind. Ihr müsst euch die neuen Regeln, Schreibweisen und Logiken also erst einmal aneignen und einprägen, was einen Lernvorgang erfordert.
Welche CSS-in-JS-Bibliotheken gibt es?
Unzählige. Das Problem ist eher, eine darunter zu finden, die regelmäßig mit Updates versorgt wird und entsprechend gepflegt erscheint. Schließlich bringt die beste Lösung nichts, wenn sie als Ein-Mann-Projekt mangels Zeit und Muße bereits nach wenigen Monaten eingestellt und nicht mehr weiterentwickelt wird.
Eine sinnvolle Übersicht erhaltet ihr in dieser GitHub-Liste, die verschiedene CSS-in-JS-Bibliotheken nennt, die Server Side Rendering und Typescript unterstützen. Eine weitere nützliche Liste ist auf State of CSS zu finden.
Für welche Bibliothek ihr euch dann genau entscheidet, bleibt euch überlassen und hängt stark von dem jeweiligen Projekt ab. Sobald ihr euch eingearbeitet habt, werdet ihr zudem bemerken, dass es noch viele weitere und mitunter sehr spezialisierte CSS-in-JS-Bibliotheken gibt.
Fazit zu CSS in Javascript
Was CSS in Javascript genau ist, sollte unser Artikel zum Thema nun in etwa erklärt haben. Ebenso dürfte deutlich geworden sein, dass es da noch weitaus mehr zu erfahren, lernen und zu verstehen gibt. Vor allem für diejenigen, die nicht in der Materie sind, ist das Modell oft schwierig nachzuvollziehen.
Klar ist am Ende, dass CSS in Javascript die Möglichkeiten, wie CSS im Einsatz genutzt wird, massiv erweitert und sinnvoll ergänzt. Vor allem die Komponentenebene verändert einiges. Ebenfalls interessant ist die Regelisolierung oder die gemeinsame Nutzung von Code in JavaScript und CSS. Das alles kann bei großen Projekten sehr sinnvoll sein, ist bei kleineren aber eventuell zu viel des Guten.
Damit soll es das jetzt erst einmal gewesen sein. Lest euch am besten als weiterführende Maßnahme in die verschiedenen Bibliotheken und ihre Fähigkeiten ein. Nur so lernt ihr, was CSS-in-JS-Bibliotheken zu leisten vermögen, wenn sie denn korrekt eingesetzt werden.
by A-DIGITAL one
Unsere Herzen schlagen Digital, unsere Projekte leben Digital, unsere Kunden lieben und schätzen Digital! Die einzigartige digitale Performance, die wir seit 1999 an den Tag legen.
Mit unserem Team von über 45 Experten begleiten wir Sie auf Ihrem Weg der digitalen Transformation. Mit klaren Strategien, persönlicher Betreuung und exzellenter Ausführung entwickeln wir, innovativ und individuell, maßgeschneiderte digitale Lösungen, die performen und verkaufen können.