Was ist eigentlich CSS in JS? thumbnail

(*)

(**)

CSS in JavaScript ist kontrovers – und kann durchaus einen Blick wert sein, nicht nur für React-Entwickler. Wir stellen das Konzept vor und formulieren Fragen, die dir bei der Entscheidung für die CSS-in-JS-Library helfen können.
(***)

(**)Im Grunde ist das Prinzip einfach: Anstelle von Stylesheets verpackt ihr euer CSS in Komponenten. Die Wahl der richtigen CSS-in-JS-Library kann bei quick (*******************************************************************************************************************************************************) Optionen zwar durchaus schwierig ausfallen, und am Ende kommt es auf euren jeweiligen Use-Case an. Einige Eigenschaften haben jedoch alle Libraries gemeinsam: (***)

(**)Alle CSS-in-JS-Bibliotheken generieren einzigartige Namen für eure CSS-Klassen, eine Idee, die mit CSS Modules populär wurde. Alle Types wirken sich nur auf ihre jeweilige Komponente aus. Styling außerhalb der Komponente bleibt von ihnen völlig unberührt und vice versa. Dass die Namen eurer CSS-Klassen kollidieren, es Probleme mit der Spezifität gibt oder der Battle mit einer sinnvollen Benennung von drölfzigtausend CSS-Klassen gehört damit der Vergangenheit an. Das ist auch der Grund, warum Entwickler, die auf einen komponentenbasierten Ansatz – additionally beispielsweise React – setzen, CSS-in-JS-Libraries so schätzen: (***)
(****)(*****)(******)(*******)
import React, {Part} from ‘react’;(******)(*******)
import styled from ‘styled-components’;(******)(*******)
const Background = styled.div`(******)(*******)
background: pink(******)(*******)
const Paragraph = styled.p`(******)(*******)(********) colour: white (*********)(******)(*******)(********) `(******)(*******)(*********)(******)(*******)
class App extends Part {(******)(*******)(********) render() {(*********)(******)(*******)
>return ((******)(*******)
(**********)(******)(*******)
(***********)t3n – digital pioneers(************)(******)(*******)
(*************)(******)(*******)
export default App;(******)(*******)
`(******)(*******)(**************)(***************)
(**)Im Beispiel, hier mit der beliebten CSS-in-JS-Library StyledComponents für React und React Native, sind die Types quasi von der Komponente umschlossen und wirken sich ausschließlich darauf aus.(***)

(**)Types, die innerhalb des HTML vergeben werden, nennt man Inline-Types. Sogenannte Pseudo-Klassen, Pseudo-Elemente und Media-Queries sind bei dieser Schreibweise allerdings ausgeschlossen. Responsive Designs sind unter Verwendung von Inline-Types ebenfalls nicht möglich. Zudem gelten Inline-Types ganz generell als weniger performant als Klassennamen. Zwei gute Gründe, weshalb die meisten neueren CSS-in-JS-Libraries zugunsten von CSS-Klassennamen von Inline-Types Abstand nehmen, um Pseudo-Klassen und -Elemente, Media-Queries und Keyframe-Animationen zu ermöglichen.(***) (****************)
(****************)

(****************)
(*****************)
Nix verpassen: Abonniere den t3n E-newsletter! (********)💌(*********)
(******************)
(*******************)
(****************)
(**)
Bitte gib eine gültige E-Mail-Adresse ein.
(***)
(********************)
(**)
Es gab leider ein Drawback beim Absenden des Formulars. Bitte versuche es erneut.
(***)
(**)
Bitte gib eine gültige E-Mail-Adresse ein.
(***)
(*********************)
(**)
Hinweis zum E-newsletter & Datenschutz
(***)
(********************)
(********************)

(********************)

(**********************)
(*****************)(********)
(***********************)
(************************)(*************************)(**************************)(***************************)(****************************)(*****************************)(*****************************)(******************************)(*******************************)Automatische Vendor-Prefixes ✔️(*********)(******************)
(********************)
(**)Bis neue CSS-Options in allen Browsern verfügbar sind, dauert es aufgrund des aufwendigen CSS-Standardisierungsprozess oft Jahre. Um neue, noch nicht standardisierte Options vorab schon nutzbar zu machen, wird nicht-standardisierte CSS-Syntax unter einem sogenannten Vendor-Prefix ausgeliefert. In älteren Browsern werden neuere Options oft nicht unterstützt, dann kommen die Prefixe zum Einsatz. Auswendig zu wissen, welche Options für welche Browser eines benötigen, ist vielleicht etwas hochgegriffen, zumal sich das über die Zeit mit der Veröffentlichung von Updates und neuen Versionen ständig ändern kann. Ressourcen wie caniuse.com können hier wertvolle Quellen sein.(******)(*******)
Die meisten CSS in JS-Libraries nehmen Entwickler:innen diese Aufgabe dankenswerterweise ab. Das heißt, ihr könnt einfach die Commonplace-Syntax nutzen und die Bibliothek generiert diese Properties inklusive Vendor-Prefix automatisch.(***)

(**)Single-Web page-Apps oder SPA kommen in der Regel ohne Server-Facet-Rendering aus. Sie werden traditionell im Browser gerendert. Vom http-Server kommt lediglich eine initiale, leere HTML-Web page. Web sites und Apps, die von Suchmaschinen geparsed und indexiert werden sollen, sollten aus einer Reihe von Gründen aber besser über serverseitig gerenderte Pages verfügen. Das Gleiche gilt für sogenannte Static-Web site-Mills, wo Inhalte als statische HTML-Recordsdata zusammen mit dem zugehörigen CSS während der Construct-Time generiert werden. Die meisten CSS-in-JS-Bibliotheken unterstützen SSR, sodass ihr sie für alle möglichen Arten von Webprojekten nutzen könnt.(***)

(**)Soviel zu den Gemeinsamkeiten. Im Einzelnen unterscheiden sich die verschiedenen JS-in-CSS-Libraries in mehreren Punkten. Einige, wie Styled Elements oder Stitches, wurden spezifisch für React entwickelt, andere – JSS, Deal with, Emotion – sind Framework-agnostisch. Die meisten unterstützen ein Format, in dem HTML, CSS und JS in der selben Datei stehen können, was sich in vielen Fällen als Vorteil erweist. So wird auf einen Blick ersichtlich, welches Styling zu welcher Komponente gehört. Für den Fall, dass die Types ein Datei zu unübersichtlich werden lassen, gibt es immer noch die Möglichkeit, sie in eine separate CSS-Datei auszulagern. Definiert werden können die Types je nach Library entweder als String innerhalb von ES-Template-Literalen oder in der Object-Types-Syntax als reguläre JS-Objekte. Einige Bibliotheken – Styled Elements, Compiled, Emotion, Goober – unterstützen beides.(***)
(**)Auch für die Anwendung der so definierten Types gibt es mehrere Optionen.(***)
(********************************)
(*****************)(********)
(*********************************)
(************************)(*************************)(**************************)(***************************)(****************************)(*****************************)(*****************************)(******************************)(*******************************)Die class-attribute- oder className-Property-Variante(*********)(******************)
(********************)
(**)Für CSS-kundige Entwickler der wohl eingängigste Weg: Types einfach als Klassennamen zu vergeben. Through API geben diese CSS-in-JS-Libraries die Klassennamen als String aus, der dann an HTML-Elemente vergeben werden kann.(***)

(****)(*****)// “css” is the API of a generic CSS-in-JS library right here(******)(*******)
const heading_style = css({(******)(*******)
colour: “pink”(******)(*******)
});(**************)(***************)
(****)(*****)
(**)const heading = `(**********************************)Title(***********************************)`;(***)(**************)(***************)
(****)(*****)operate Heading() { return (************************************)Title(***********************************); }(**************)(***************)
(**)Diese Methode ähnelt wohl am ehesten traditionellem CSS: Zuerst wird ein Fashion definiert und anschließend auf die so zu gestaltenden Elemente angewandt. Unterstützt wird sie unter anderem von Deal with, Emotion, Goober, Fela, JSS, Stitches, TypeStyle und Styled JSX.(***)

(**)Eine weitere beliebte Gangart ist die (*************************************)-Variante. Eingeführt wurde sie erstmals in der Styled-Elements-Library. Statt die Types separat zu definieren, werden bei diesem Ansatz Ingredient und zugehöriges Styling zusammen definiert. Die Styled-Elements-API gibt dann eine neue Komponente zurück, die bereits über das gewünschte Styling verfügt. Unterstützt wird sie von Stitches, Emotion, Styled Elements und Compiled.(***)

(**)Ein neuerer Ansatz, der durch eine Library namens Emotion populär wurde, funktioniert über die Fashion-Vergabe an spezielle Properties. Die API ist allerdings nur mit JSX verwendbar. Dieser Ansatz hat den Vorteil, dass der Import einer API wegfällt, Types lassen sich einfach an die CSS-Property weitergeben, ähnlich wie bei der Verwendung von Inline-Types. Weil es sich bei der .css-Property nicht um ein Commonplace-HTML-Attribut handelt, ist die Set up eines separaten, von der jeweiligen Bibliothek bereitgestellten Plugins nötig.(***)

(**************************************)
(***************************************)(********)
(****************************************)
(************************)(*************************)(**************************)(***************************)(****************************)(*****************************)(*****************************)(******************************)(*******************************)2 Methoden, die Types im Browser auszuliefern(*********)(***********************************)
(********************)
(**)Es gibt zwei Arten, auf die die Types im Browser ausgeliefert werden.(***)
(*****************************************)
(*****************)(********)
(******************************************)
(************************)(*************************)(**************************)(***************************)(****************************)(*****************************)(*****************************)(******************************)(*******************************)DOM-Injection zur Laufzeit(*********)(******************)
(********************)
(**)Die meisten CSS-in-JS Libraries fügen die Types zur Laufzeit dem DOM hinzu. Sie nutzen entweder (*******************************************)-Tags, die während SSR der HTML-Web page angehängt werden, oder eine API namens CSSStyleSheet, um die Types direkt innerhalb des CSS-Object-Fashions zu verwalten. Die Types während SSR der HTML-Web page hinzuzufügen, wirkt sich positiv auf die Efficiency aus, weil so keine separate CSS-Datei, die erst vom Server abgerufen werden muss, den Rendering-Prozess blockiert. Dieser Ansatz bietet sogenannte Crucial-CSS-Extraktion out of the Field; das bedeutet, während des SSR werden nur die Types dem HTML-Dokument hinzugefügt, die nötig sind, um die initiale Ansicht zu rendern. Dynamische Types werden entfernt, die Menge an Code, der preliminary heruntergeladen muss, wird so noch einmal kleiner und Ladezeiten entsprechend reduziert.(***)
(****************)
(**)Allerdings ist die Handhabung dynamischer Stile im Browser bei diesem Ansatz nicht ohne eine zusätzliche Runtime-Library möglich. Auch werden die inline eingefügten SSR-Types nicht gecached und müssen bei jedem Request erneut an den Browser ausgeliefert werden. Während der Rehydration werden sie in Type von JS erneut an den Browser ausgeliefert.(***)
(********************************************)
(*****************)(********)
(*********************************************)
(************************)(*************************)(**************************)(***************************)(****************************)(*****************************)(*****************************)(******************************)(*******************************)Statische Extraktion von CSS-Dateien(*********)(******************)
(********************)
(**)Eine kleine Anzahl CSS-in-JS-Bibliotheken verfolgt einen elementary anderen Ansatz. Anstatt dass die Types in das DOM eingefügt werden, generieren die Bibliotheken statische .css-Dateien. Efficiency-technisch ist das vergleichbar mit normalen CSS-Dateien: Die Menge an Code, die an den Browser ausgeliefert wird, ist viel kleiner, zusätzliche Laufzeitbibliotheken oder Rehydrierung sind hier nicht nötig. Statische .css-Dateien werden per Default im Browser gecached. Beim ersten Besuch einer Webpage ist der Cache allerdings leer, was dazu führt, dass der First-Contentful-Paint länger braucht als bei der erstgenannten Methode. Dynamische Types werden von Anfang an in das Bundle inkludiert, das CSS, das vom Browser geladen werden muss, ist demnach potenziell größer.(******)(*******)
Die meisten CSS-Libraries fügen die Types in das DOM ein. Nur einige wenige, darunter Deal with, style9 und Linaria, unterstützen die statische Extraktion von CSS-Dateien.(***)

(**)Einige Bibliotheken verfolgen mit Atomic CSS einen dritten Ansatz. Inspiriert ist er von CSS-Frameworks wie Tailwind oder Tachyons. Anstelle einer CSS-Klasse, die alle Properties enthält, die für ein bestimmtes Ingredient definiert wurden, generieren diese Bibliotheken eine CSS-Klasse für jede Property-Worth-Kombination, die dann in der gesamten Codebase wiederverwendet werden kann.(******)(*******)
In der Theorie ist dieser Ansatz gerade für große Anwendungen geeignet, bei denen die Klassen oft wiederverwendet werden. Der einzige Haken: Die Klassennamen müssen auf jedes der HTML-Elemente angewandt werden, die HTML-Datei wird additionally größer. Trotzdem dürfte bei diesem Ansatz die Menge der Bytes, die an den Browser ausgeliefert werden, im Schnitt kleiner sein als bei den vorher genannten.(***)
(**********************************************)
(***************************************)(********)
(***********************************************)
(************************)(*************************)(**************************)(***************************)(****************************)(*****************************)(*****************************)(******************************)(*******************************)Die passende Bibliothek finden(*********)(***********************************)
(********************)
(**)Wer bis hierher gelesen hat, stellt fest, dass die Entscheidung für die passende Library alles andere als einfach ist. Eine Reihe von Fragen zu beantworten, kann bei der Entscheidung für die richtige Bibliothek allerdings helfen: (***)
(************************************************)
(*************************************************)Nutzt das Projekt React oder nicht? Wenn ja, haben Entwickler die Qual der Wahl zwischen einer breiten Palette an CSS-in-JS-Bibliotheken. Für Anwendungen, die ein anderes Framework oder Vanilla JS nutzen, muss hingegen auf eine Framework-agnostische Bibliothek zurückgegriffen werden.(**************************************************)
(*************************************************)Ist die App sehr interaktiv und setzt auf client-seitiges Rendering oder handelt es sich um eine dynamische Web site mit SSR? In diesem Fall ist es wahrscheinlich schlauer, statische CSS-Dateien zu extrahieren. So profitiert die Anwendung von Caching.(**************************************************)
(*************************************************)Ob bereits CSS vorhanden ist, das migriert werden muss, beeinflusst die Wahl ebenfalls. In diesem Fall empfiehlt es sich, eine CSS-in-JS-Bibliothek zu nutzen, die Tagged Templates unterstützt. So wird die Migration einfacher.(**************************************************)
(*************************************************)Auch, ob die Anwendung für Erstbesucher oder wiederkehrende Nutzer:innen optimiert werden soll, spielt eine Rolle. Statische .css-Dateien bieten für wiederkehrende Consumer die beste UX, allerdings ist beim ersten Go to dann ein zusätzlicher http-Request nötig, der das Rendern der Seite kurzzeitig blockiert. Wer allerdings vorhat, seiner Anwendung häufig einen neuen Look zu verpassen, kann den Faktor Caching bei der Wahl natürlich außen vorlassen.(**************************************************)
(*************************************************)Nutzen Entwickler:innen Types und Komponenten vielfach mehrmals in einer Anwendung, sind Frameworks, die auf Atomic CSS bauen, wohl die beste Choice.(**************************************************)
(***************************************************)
(********************)
(**)(****************************************************)(*****************************************************)(***)

(*****************)Das könnte dich auch interessieren(******************)

(********************)

By Admin

Leave a Reply

Your email address will not be published. Required fields are marked *