{"id":66340,"date":"2023-10-16T19:27:10","date_gmt":"2023-10-16T18:27:10","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=66340&#038;post_type=knowledgebase&#038;preview_id=66340"},"modified":"2025-10-01T20:15:15","modified_gmt":"2025-10-01T19:15:15","slug":"jss","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/jss\/","title":{"rendered":"Gestalte deine React-Website mit JSS"},"content":{"rendered":"<p>Mit dem Styling kannst du festlegen, wie deine Website aussieht, und eine koh\u00e4rente und \u00e4sthetische Marke schaffen. Obwohl verschiedene Ans\u00e4tze Cascading Style Sheets (CSS) zur Gestaltung von Webseiten verwenden, sind <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\">JavaScript-basierte<\/a> L\u00f6sungen flexibler und geben dir mehr Kontrolle als Standard-CSS.<\/p>\n<p>Eine beliebte Methode ist die Verwendung von JavaScript Style Sheets (JSS), mit der du CSS-Stile in JavaScript schreiben kannst. JSS hat mehrere Vorteile, z. B. die Verwendung von Variablen, JavaScript-Ausdr\u00fccken und Funktionen zur Erstellung dynamischer Stile und Designs.<\/p>\n<p>In diesem Artikel erf\u00e4hrst du, wie JSS funktioniert, welche Vorteile es hat und wie du es in deinen JavaScript-Anwendungen einsetzen kannst. Au\u00dferdem geht es um dynamisches Styling, Themes und Leistungsoptimierung. Du kannst JSS f\u00fcr viele Arten von Anwendungen nutzen, aber in diesem Artikel konzentrieren wir uns auf JSS f\u00fcr React.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Was ist JSS?<\/h2>\n<p>Mit JSS kannst du CSS-Stile als JavaScript-Objekte schreiben und diese Objekte als Klassennamen in Elementen oder Komponenten verwenden. JSS ist Framework-unabh\u00e4ngig, du kannst es also in Vanilla JavaScript oder mit Frameworks wie <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-react\/\">React<\/a> und <a href=\"https:\/\/kinsta.com\/de\/blog\/angular-komponentenbibliotheken\/\">Angular<\/a> verwenden.<\/p>\n<p>JSS hat mehrere Vorteile gegen\u00fcber dem traditionellen CSS-Styling:<\/p>\n<ul>\n<li><strong>Dynamisches Styling <\/strong>&#8211; Mit JSS kannst du Stile auf der Grundlage von Benutzerinteraktionen oder Werten wie Requisiten oder Kontext manipulieren. Mithilfe von JavaScript-Funktionen kannst du im Browser dynamisch Stile erzeugen, die vom Zustand der Anwendung, von externen Daten oder von Browser-APIs abh\u00e4ngen.<\/li>\n<\/ul>\n<ul>\n<li><strong>Verbesserte Theming-Funktionen <\/strong>&#8211; Mit JSS kannst du Stile f\u00fcr ein bestimmtes Theme erstellen. Du kannst z. B. Stile f\u00fcr ein helles und ein dunkles Theme erstellen und diese themespezifischen Stile dann je nach Nutzerpr\u00e4ferenz auf die gesamte Anwendung anwenden. Wenn du React verwendest, unterst\u00fctzt das <a href=\"https:\/\/github.com\/cssinjs\/jss\/tree\/master\/packages\/react-jss\" target=\"_blank\" rel=\"noopener noreferrer\">React-JSS-Paket<\/a> die kontextbasierte Weitergabe von Themes. Du kannst das Theme an einer Stelle definieren und verwalten, bevor du die Theme-Informationen mit Hilfe eines Theme-Providers an den Komponentenbaum weitergibst.<\/li>\n<\/ul>\n<ul>\n<li><strong>Verbesserte Wartbarkeit <\/strong>&#8211; Durch die Definition von Styles in JavaScript-Objekten kannst du zusammengeh\u00f6rige Styles an einem Ort gruppieren und bei Bedarf in deine Anwendung importieren. Dieser Ansatz reduziert Code-Duplizierung und verbessert die Code-Organisation, wodurch es einfacher wird, Stile im Laufe der Zeit zu pflegen.<\/li>\n<\/ul>\n<ul>\n<li><strong>Echtes CSS <\/strong>&#8211; JSS generiert echtes CSS anstelle von Inline-Styles, die un\u00fcbersichtlich und schwer zu verwalten sein k\u00f6nnen. JSS verwendet standardm\u00e4\u00dfig eindeutige Klassennamen, um Namenskollisionen zu vermeiden, die durch die globale Natur von CSS verursacht werden.<\/li>\n<\/ul>\n<h2>Wie man Styles mit JSS schreibt<\/h2>\n<p>Dieser Artikel basiert auf einem React-Projekt. Er verwendet das Paket <code>react-jss<\/code>, das JSS \u00fcber die API <code>Hooks<\/code> in React integriert. <code>react-jss<\/code> wird mit den Standard-Plugins ausgeliefert und erm\u00f6glicht es dir, JSS mit minimalen Einstellungen zu verwenden.<\/p>\n<h3>Grundlegende Syntax und Verwendung von JSS in React<\/h3>\n<p>Um JSS in React zu verwenden, installierst du zun\u00e4chst das Paket <code>react-jss<\/code> mit einem Paketmanager wie npm oder Yarn.<\/p>\n<p>Die Syntax zum Schreiben von Stilen in JSS beinhaltet die Definition von CSS-Regeln f\u00fcr bestimmte Elemente innerhalb eines <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript-Objekts<\/a>. Der folgende Code definiert zum Beispiel die Stile f\u00fcr eine Schaltfl\u00e4che in einer React-Anwendung.<\/p>\n<pre><code class=\"language-js\">\nconst styles = {\n      button: {\n            padding: \"10px 20px\",\n            background: \"#f7df1e\",\n            textAlign: \"center\",\n            border:\"none\"\n      }\n};<\/code><\/pre>\n<p><strong>Hinweis<\/strong>: Die CSS-Eigenschaften sind in Gro\u00dfbuchstaben geschrieben.<\/p>\n<p>Um diese Stile auf ein HTML-Element anzuwenden:<\/p>\n<ol start=\"1\">\n<li>Erzeuge die Klassen, indem du die Stile an die <code>createUseStyles()<\/code> Methode von <code>react-jss<\/code> weitergibst:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">import { createUseStyles } from \"react-jss\";\nconst styles = {\n       button: {\n             padding: \"10px 20px\",\n             background: \"#f7df1e\",\n             textAlign: \"center\",\n             border:\"none\"\n       }\n};\nconst useStyles = createUseStyles(styles);<\/code><\/pre>\n<ol start=\"2\">\n<li>Wende das CSS auf das Schaltfl\u00e4chenelement an, indem du den generierten Klassennamen verwendest:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const App = () = &gt; {\n      const classes = useStyles();\n      return (\n            &lt; button className={classes.button} &gt; &lt;\/button &gt;\n      );\n};<\/code><\/pre>\n<p>Dieser Code erstellt eine React-Komponente und wendet die Stile auf das <code>styles<\/code> Objekt an.<\/p>\n<h3>Umgang mit Pseudo-Klassen, Media Queries und Keyframes<\/h3>\n<p>JSS unterst\u00fctzt alle bestehenden CSS-Funktionen, einschlie\u00dflich Pseudoklassen, Media Queries und Keyframes. Verwende die gleiche Syntax wie bei regul\u00e4ren CSS-Stilregeln, um Stile f\u00fcr diese Funktionen zu definieren.<\/p>\n<h4>Pseudo-Klassen<\/h4>\n<p>Angenommen, du m\u00f6chtest dem Button eine Pseudoklasse f\u00fcr den Schwebezustand hinzuf\u00fcgen, damit sich die Hintergrundfarbe \u00e4ndert, wenn ein Nutzer mit der Maus dar\u00fcber f\u00e4hrt. Der folgende Code implementiert diese Pseudoklasse, so dass der Hintergrund der Schaltfl\u00e4che beim \u00dcberfahren hellgr\u00fcn wird:<\/p>\n<pre><code class=\"language-js\">const styles = {\n      button: {\n            padding: \"10px 20px\",\n            background: \"#f7df1e\",\n            textAlign: \"center\",\n            border:\"none\",\n            '&:hover': {\n                  backgroundColor: 'lightgreen',\n            }\n     }\n};<\/code><\/pre>\n<h4>Keyframes<\/h4>\n<p>Du kannst auch eine Keyframe-Animation auf eine Komponente anwenden, indem du die Regel <code>@keyframes<\/code> verwendest. Im Folgenden siehst du zum Beispiel ein Stilobjekt f\u00fcr eine sich drehende Komponente.<\/p>\n<pre><code class=\"language-js\">const styles = {\n       '@keyframes spin': {\n             '0%': {\n                   transform: 'rotate(0deg)',\n             },\n             '100%': {\n                   transform: 'rotate(360deg)',\n             },\n       },\n       spinner: {\n              width: \"100px\",\n              height: \"100px\",\n              backgroundColor: \"lightgreen\",\n              animation: '$spin 1s linear infinite',\n       },\n}<\/code><\/pre>\n<p>In der Funktion Stile hast du mit der Regel <code>@keyframes<\/code> eine Keyframe-Animation namens <code>spin<\/code> definiert. Dann erstellst du eine Klasse mit dem Namen <code>spinner<\/code>, die die Animation unter Verwendung der <code>$<\/code> Syntax anwendet, um die Keyframe-Animation zu referenzieren.<\/p>\n<h4>Medienabfragen<\/h4>\n<p><a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/\">Medienabfragen<\/a> verwenden auch in JSS die \u00fcbliche CSS-Syntax. Um zum Beispiel die Schriftgr\u00f6\u00dfe einer Schaltfl\u00e4che f\u00fcr eine bestimmte Bildschirmgr\u00f6\u00dfe zu \u00e4ndern, verwendest du die folgenden Stile:<\/p>\n<pre><code class=\"language-js\">const styles = {\n      button: {\n            fontSize: \"12px\",\n            '@media (max-width: 768px)': {\n                  fontSize: '34px',\n            },\n      }\n};<\/code><\/pre>\n<p>Wie du gerade gesehen hast, unterscheidet sich das Schreiben von Styles in JSS nicht so sehr vom Schreiben von einfachem CSS. Der Vorteil ist jedoch, dass du die M\u00f6glichkeiten von JavaScript nutzen kannst, um deine Stile dynamisch zu gestalten.<\/p>\n<h2>Dynamisches Styling mit JSS<\/h2>\n<p>Dynamisches Styling bedeutet, Stile zu erstellen, die sich in Abh\u00e4ngigkeit von bestimmten Bedingungen \u00e4ndern. In React k\u00f6nnen sich die Stile abh\u00e4ngig von Werten wie Status, Props und Komponentenkontext \u00e4ndern.<\/p>\n<h3>Wie man dynamische Styles mit JSS erstellt<\/h3>\n<p>In JSS kannst du mit JavaScript-Ausdr\u00fccken Stile bedingt auf deine Elemente anwenden und so dynamische Stilregeln erstellen.<\/p>\n<p>Nehmen wir an, du hast eine Schaltfl\u00e4che, die eine Eigenschaft namens <code>bgColor<\/code> erh\u00e4lt. Ihr Wert ist die Hintergrundfarbe der Schaltfl\u00e4che. Um eine Stilregel zu erstellen, die die Hintergrundfarbe der Schaltfl\u00e4che auf der Grundlage der Requisite \u00e4ndert, \u00fcbergibst du die Requisite an die Methode <code>useStyles<\/code>.<\/p>\n<pre><code class=\"language-js\">import { createUseStyles } from \"react-jss\"\n\nconst styles = {\n      button: {\n            padding: \"10px 20px\",\n            background: props = &gt;props.bgColor,\n            textAlign: \"center\",\n            border:\"none\"\n      }\n};\nconst Button = ({...props}) =&gt; {\n  \n      const useStyles = createUseStyles(styles);\n      const classes = useStyles({...props});\n      return (\n            &lt;button className={classes.button}&gt;Button &lt;\/button&gt;\n      );\n};<\/code><\/pre>\n<p>Dann kannst du die Requisiten im Styles-Objekt referenzieren. Das obige Beispiel verweist auf <code>props.bgColor<\/code>.<\/p>\n<p>Du kannst die gew\u00fcnschte Hintergrundfarbe \u00fcbergeben, wenn du die Komponente renderst. Die Komponente unten rendert zwei <code>Button<\/code> Komponenten mit den Hintergrundfarben <code>lightgreen<\/code> und <code>yellow<\/code>.<\/p>\n<pre><code class=\"language-js\">export default function App() {\n  return (\n    &lt;div &gt;\n      &lt;Button bgColor=\"lightgreen\" \/&gt;\n      &lt;div style={{ marginTop: \"10px\" }}&gt;&lt;\/div&gt;\n      &lt;Button bgColor=\"yellow\" \/&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n<figure style=\"width: 1838px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/image1.png\" alt=\"Zwei mit JSS dynamisch gestylte Schaltfl\u00e4chen\" width=\"1838\" height=\"462\"><figcaption class=\"wp-caption-text\">Zwei mit JSS dynamisch gestylte Schaltfl\u00e4chen<\/figcaption><\/figure>\n<p>Jedes Mal, wenn du die Komponente <code>Button<\/code> renderst, kannst du den Hintergrund nach Belieben gestalten.<\/p>\n<p>Du kannst die Stile auch abh\u00e4ngig vom Zustand einer Komponente \u00e4ndern. Angenommen, du hast ein Navigationsmen\u00fc mit mehreren Links. Um den Link f\u00fcr die aktuelle Seite hervorzuheben, definierst du einen Statuswert namens <code>isActive<\/code>, der festh\u00e4lt, ob ein Men\u00fc-Link aktiv ist.<\/p>\n<p>Mit einem tern\u00e4ren JavaScript-Operator kannst du dann den Wert von <code>isActive<\/code> \u00fcberpr\u00fcfen und die Farbe des Links auf blau setzen, wenn der Status <code>true<\/code> ist, und auf rot, wenn <code>false<\/code>.<\/p>\n<pre><code class=\"language-js\">const styles = {\n      a: {\n             color: ({ isActive }) =&gt; isActive ? 'blue' : 'red',\n             padding: '10px',\n      },\n};<\/code><\/pre>\n<p>Aktive Links werden nun blau, inaktive Links werden rot.<\/p>\n<p>Auf \u00e4hnliche Weise kannst du dynamisches Styling basierend auf dem Kontext erstellen. Du kannst ein Element wie <code>UserContext<\/code> basierend auf dem Wert eines Kontexts stylen, der den Online-Status des Nutzers speichert.<\/p>\n<pre><code class=\"language-js\">const { online } = useContext(UserContext);\nconst styles = {\n      status: {\n            background: online ? 'lightgreen' : '',\n            width: '20px',\n            height: '20px',\n            borderRadius: \"50%\",\n            display: online ? 'flex' : 'hidden'\n      },\n};<\/code><\/pre>\n<p>In diesem Beispiel hat das Element einen gr\u00fcnen Hintergrund, wenn der Nutzer online ist. Du setzt die Eigenschaft <code>display<\/code> auf <code>flex<\/code>, wenn der Nutzer online ist, und auf <code>hidden<\/code>, wenn der Nutzer offline ist.<\/p>\n<h3>Anwendungsf\u00e4lle f\u00fcr dynamisches Styling<\/h3>\n<p>Dynamisches Styling ist eine leistungsstarke Funktion von JSS, f\u00fcr die es viele Anwendungsf\u00e4lle gibt:<\/p>\n<ul>\n<li><strong>Theming<\/strong> &#8211; Du kannst Stile definieren, die auf einem Theme-Objekt basieren, z. B. ein helles und ein dunkles Theme, und diese als Prop- oder Kontextwert an Komponenten weitergeben.<\/li>\n<li><strong>Bedingtes Rendering<\/strong> &#8211; Mit JSS kannst du Stile definieren, die auf bestimmten Werten basieren. Du kannst Stile erstellen, die nur unter bestimmten Bedingungen angewendet werden, z. B. wenn eine Schaltfl\u00e4che deaktiviert ist, ein Textfeld einen Fehlerstatus hat, ein Seitennavigationsmen\u00fc ge\u00f6ffnet ist oder wenn ein Nutzer online ist.<\/li>\n<li><strong>Responsive Design<\/strong> &#8211; Du kannst dynamische Stile in JSS verwenden, um den Stil eines Elements je nach Breite des Viewports zu \u00e4ndern. Du kannst zum Beispiel eine Reihe von Stilen f\u00fcr einen bestimmten Haltepunkt mithilfe von Media Queries definieren und sie abh\u00e4ngig von der Bildschirmgr\u00f6\u00dfe anwenden.<\/li>\n<\/ul>\n<h2>Wie du Themes mit JSS verwendest<\/h2>\n<p>Verwende Themes, um eine einheitliche Benutzeroberfl\u00e4che f\u00fcr deine gesamte Anwendung zu schaffen. Es ist einfach, Themes in JSS zu erstellen &#8211; definiere einfach ein Theme-Objekt mit globalen Style-Werten, wie Farben, Typografie und Abst\u00e4nden. Zum Beispiel:<\/p>\n<pre><code class=\"language-js\">const theme = {\n      colors: {\n            primary: '#007bff',\n            secondary: '#6c757d',\n            light: '#f8f9fa',\n            dark: '#343a40',\n       },\n       typography: {\n             fontFamily: 'Helvetica, Arial, sans-serif',\n             fontSize: '16px',\n             fontWeight: 'normal',\n       },\n       spacing: {\n             small: '16px',\n             medium: '24px',\n             large: '32px',\n       },\n};<\/code><\/pre>\n<p>Um Themes auf deine Komponenten anzuwenden, verwende Kontextanbieter. Die JSS-Bibliothek bietet eine <code>ThemeProvider<\/code> Komponente, die du um Komponenten wickeln kannst, die Zugriff auf das Thema ben\u00f6tigen.<\/p>\n<p>Das folgende Beispiel umh\u00fcllt die Komponente <code>Button<\/code> mit der Komponente <code>ThemeProvider<\/code> und \u00fcbergibt das Objekt <code>theme<\/code> als Prop.<\/p>\n<pre><code class=\"language-js\">import { ThemeProvider } from \"react-jss\";\nconst App = () =&gt; (\n      &lt;ThemeProvider theme={theme}&gt;\n            &lt;Button \/&gt;\n      &lt;\/ThemeProvider&gt;\n)<\/code><\/pre>\n<p>Du kannst auf das Theme in der Komponente <code>Button<\/code> mit einem <code>useTheme()<\/code> Hook zugreifen und es an das Objekt <code>useStyles<\/code> \u00fcbergeben. Im folgenden Beispiel werden die im Theme-Objekt definierten Stile verwendet, um eine prim\u00e4re Schaltfl\u00e4che zu erstellen.<\/p>\n<pre><code class=\"language-js\">import { useTheme } from \u201creact-jss\u201d\n\nconst useStyles = createUseStyles({\n  primaryButton: {\n    background: ({ theme }) =&gt; theme.colors.primary,\n    font: ({ theme }) =&gt; theme.typography.fontFamily,\n    fontSize: ({ theme }) =&gt; theme.typography.fontSize,\n    padding: ({ theme }) =&gt; theme.spacing.medium\n  }\n});\n\nconst Button = () =&gt; {\n      const theme = useTheme()\n      const classes = useStyles({theme})\n      return (\n            &lt;div&gt;\n              &lt;button className={classes.primaryButton}&gt; Primary Button &lt;\/button&gt;\n            &lt;\/div&gt;\n\n      )\n}<\/code><\/pre>\n<p>Die Schaltfl\u00e4che sollte wie das Bild unten aussehen, mit schwarzem Text auf einer rechteckigen, blauen Schaltfl\u00e4che.<\/p>\n<figure style=\"width: 1823px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/image3.png\" alt=\"Ein prim\u00e4rer Schaltfl\u00e4chenstil basierend auf dem Theme\" width=\"1823\" height=\"194\"><figcaption class=\"wp-caption-text\">Ein prim\u00e4rer Schaltfl\u00e4chenstil basierend auf dem Theme<\/figcaption><\/figure>\n<p>Wenn du einen der Werte im Theme-Objekt \u00e4nderst, werden automatisch neue Stile auf alle Komponenten angewendet, die mit der Komponente <code>ThemeProvider<\/code> verpackt sind. Wenn du den Wert der Prim\u00e4rfarbe in <code>lightgreen<\/code> \u00e4nderst, wird auch die Farbe der Schaltfl\u00e4che hellgr\u00fcn, wie in der Abbildung unten.<\/p>\n<figure style=\"width: 1744px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/image2.png\" alt=\"Eine prim\u00e4re Schaltfl\u00e4chenfarbe passt sich an das Theme an\" width=\"1744\" height=\"191\"><figcaption class=\"wp-caption-text\">Eine prim\u00e4re Schaltfl\u00e4chenfarbe passt sich an das Theme an<\/figcaption><\/figure>\n<p>Hier sind ein paar Richtlinien, die du bei der Erstellung von Designs beachten solltest:<\/p>\n<ul>\n<li>Definiere das Theme-Objekt in einer separaten Datei, damit der Code \u00fcbersichtlich und leicht zu pflegen ist.<\/li>\n<li>Verwende aussagekr\u00e4ftige Namen f\u00fcr die Style-Werte, damit das Theme-Objekt einfach zu lesen und zu aktualisieren ist.<\/li>\n<li>Verwende CSS-Variablen, um Werte zu definieren, die du h\u00e4ufig in deinem CSS verwendest.<\/li>\n<li>Erstelle Standardwerte f\u00fcr alle Stileigenschaften, um ein einheitliches Design in deiner Anwendung zu gew\u00e4hrleisten.<\/li>\n<li>Teste deine Themes gr\u00fcndlich, um sicherzustellen, dass sie auf allen Ger\u00e4ten und Browsern wie vorgesehen funktionieren.<\/li>\n<\/ul>\n<p>Wenn du diese Best Practices befolgst, kannst du ein Theme erstellen, das einfach zu verwenden und leicht zu aktualisieren ist, wenn deine Anwendung w\u00e4chst.<\/p>\n<h2>Leistung und Optimierung<\/h2>\n<p>JSS ist eine leistungsstarke Styling-L\u00f6sung. Mit JSS werden nur die Stile, die gerade auf dem Bildschirm verwendet werden, zum Document Object Model (DOM) hinzugef\u00fcgt, was die Gr\u00f6\u00dfe des DOM reduziert und das Rendern beschleunigt. JSS speichert auch die gerenderten Stile im Cache, was bedeutet, dass JSS CSS nur einmal kompiliert, was die Leistung noch weiter verbessert.<\/p>\n<p>Du kannst die Vorteile zus\u00e4tzlicher Leistungsoptimierungen nutzen, indem du das <a href=\"https:\/\/github.com\/cssinjs\/jss\/tree\/master\/packages\/react-jss\" target=\"_blank\" rel=\"noopener noreferrer\"><code>react-jss<\/code><\/a> paket anstelle des <a href=\"https:\/\/github.com\/cssinjs\"><code>JSS<\/code><\/a> kernpaket. Zum Beispiel entfernt <code>react-jss<\/code> die Stylesheets, wenn die Komponente nicht mehr eingebunden wird. Es k\u00fcmmert sich auch um die kritische CSS-Extraktion und extrahiert nur Stile aus gerenderten Komponenten. Auf diese Weise reduziert das Paket <code>react-jss<\/code> die Gr\u00f6\u00dfe des CSS-B\u00fcndels und verbessert die Ladezeiten.<\/p>\n<p>Um die Gr\u00f6\u00dfe des CSS-Pakets weiter zu reduzieren, kannst du den Code aufteilen, um nur die CSS zu laden, die eine bestimmte Seite oder Komponente ben\u00f6tigt. Eine Bibliothek wie <code>loadable-components<\/code> kann das Code-Splitting vereinfachen.<\/p>\n<p>Mit JSS kannst du CSS auch serverseitig generieren. Mit der Registry-Klasse <code>StyleSheet<\/code> von JSS kannst du das angeh\u00e4ngte CSS aggregieren und stringifizieren und dann die gerenderten Komponenten und den CSS-String an den Client senden. Nach dem Start der Anwendung wird das statische CSS nicht mehr ben\u00f6tigt und du kannst es entfernen, um die Gr\u00f6\u00dfe des Pakets zu verringern.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Du hast die Grundlagen der JSS-Syntax kennengelernt und wei\u00dft, wie man Style-Objekte erstellt und auf Komponenten anwendet und wie man dynamische Styles erstellt. Du wei\u00dft auch, wie du die Komponente <code>ThemeProvider<\/code> verwenden kannst, um Themes anzuwenden und die Leistung von JSS zu verbessern. Jetzt kannst du JSS nutzen, um wiederverwendbare, wartbare und dynamische Stile zu erstellen, die sich an verschiedene Bedingungen anpassen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mit dem Styling kannst du festlegen, wie deine Website aussieht, und eine koh\u00e4rente und \u00e4sthetische Marke schaffen. Obwohl verschiedene Ans\u00e4tze Cascading Style Sheets (CSS) zur Gestaltung &#8230;<\/p>\n","protected":false},"author":290,"featured_media":66341,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[952,975],"class_list":["post-66340","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-javascript-tutorials","topic-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Gestalte deine React-Website mit JSS - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Erfahre, wie JSS funktioniert, welche Vorteile es hat, wie du deine React-Website mit JSS stylst und wie du es in deinen JavaScript-Anwendungen einsetzen kannst.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/jss\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gestalte deine React-Website mit JSS\" \/>\n<meta property=\"og:description\" content=\"Erfahre, wie JSS funktioniert, welche Vorteile es hat, wie du deine React-Website mit JSS stylst und wie du es in deinen JavaScript-Anwendungen einsetzen kannst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/jss\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-16T18:27:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:15:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/jss.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marcia Ramos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Erfahre, wie JSS funktioniert, welche Vorteile es hat, wie du deine React-Website mit JSS stylst und wie du es in deinen JavaScript-Anwendungen einsetzen kannst.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/jss.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcia Ramos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"10\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jss\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jss\/\"},\"author\":{\"name\":\"Marcia Ramos\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\"},\"headline\":\"Gestalte deine React-Website mit JSS\",\"datePublished\":\"2023-10-16T18:27:10+00:00\",\"dateModified\":\"2025-10-01T19:15:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jss\/\"},\"wordCount\":1851,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jss\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/jss.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/jss\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jss\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/jss\/\",\"name\":\"Gestalte deine React-Website mit JSS - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jss\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jss\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/jss.jpg\",\"datePublished\":\"2023-10-16T18:27:10+00:00\",\"dateModified\":\"2025-10-01T19:15:15+00:00\",\"description\":\"Erfahre, wie JSS funktioniert, welche Vorteile es hat, wie du deine React-Website mit JSS stylst und wie du es in deinen JavaScript-Anwendungen einsetzen kannst.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jss\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/jss\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jss\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/jss.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/jss.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jss\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Gestalte deine React-Website mit JSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\",\"name\":\"Marcia Ramos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"caption\":\"Marcia Ramos\"},\"description\":\"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/marciadiasramos\/\"],\"honorificSuffix\":\"B.Sc.\",\"gender\":\"Female\",\"knowsLanguage\":[\"English\",\"Portuguese\"],\"jobTitle\":\"Editorial Team Lead\",\"worksFor\":\"Kinsta Inc.\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/marciaramos\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Gestalte deine React-Website mit JSS - Kinsta\u00ae","description":"Erfahre, wie JSS funktioniert, welche Vorteile es hat, wie du deine React-Website mit JSS stylst und wie du es in deinen JavaScript-Anwendungen einsetzen kannst.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/jss\/","og_locale":"de_DE","og_type":"article","og_title":"Gestalte deine React-Website mit JSS","og_description":"Erfahre, wie JSS funktioniert, welche Vorteile es hat, wie du deine React-Website mit JSS stylst und wie du es in deinen JavaScript-Anwendungen einsetzen kannst.","og_url":"https:\/\/kinsta.com\/de\/blog\/jss\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-10-16T18:27:10+00:00","article_modified_time":"2025-10-01T19:15:15+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/jss.jpg","type":"image\/jpeg"}],"author":"Marcia Ramos","twitter_card":"summary_large_image","twitter_description":"Erfahre, wie JSS funktioniert, welche Vorteile es hat, wie du deine React-Website mit JSS stylst und wie du es in deinen JavaScript-Anwendungen einsetzen kannst.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/jss.jpg","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Marcia Ramos","Gesch\u00e4tzte Lesezeit":"10\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/jss\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/jss\/"},"author":{"name":"Marcia Ramos","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116"},"headline":"Gestalte deine React-Website mit JSS","datePublished":"2023-10-16T18:27:10+00:00","dateModified":"2025-10-01T19:15:15+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/jss\/"},"wordCount":1851,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/jss\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/jss.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/jss\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/jss\/","url":"https:\/\/kinsta.com\/de\/blog\/jss\/","name":"Gestalte deine React-Website mit JSS - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/jss\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/jss\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/jss.jpg","datePublished":"2023-10-16T18:27:10+00:00","dateModified":"2025-10-01T19:15:15+00:00","description":"Erfahre, wie JSS funktioniert, welche Vorteile es hat, wie du deine React-Website mit JSS stylst und wie du es in deinen JavaScript-Anwendungen einsetzen kannst.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/jss\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/jss\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/jss\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/jss.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/jss.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/jss\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/de\/thema\/react\/"},{"@type":"ListItem","position":3,"name":"Gestalte deine React-Website mit JSS"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116","name":"Marcia Ramos","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","caption":"Marcia Ramos"},"description":"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.","sameAs":["https:\/\/www.linkedin.com\/in\/marciadiasramos\/"],"honorificSuffix":"B.Sc.","gender":"Female","knowsLanguage":["English","Portuguese"],"jobTitle":"Editorial Team Lead","worksFor":"Kinsta Inc.","url":"https:\/\/kinsta.com\/de\/blog\/author\/marciaramos\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/66340","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/290"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=66340"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/66340\/revisions"}],"predecessor-version":[{"id":66599,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/66340\/revisions\/66599"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66340\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66340\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66340\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66340\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66340\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66340\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66340\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66340\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/66341"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=66340"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=66340"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=66340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}