Mit dem Styling kannst du festlegen, wie deine Website aussieht, und eine kohärente und ästhetische Marke schaffen. Obwohl verschiedene Ansätze Cascading Style Sheets (CSS) zur Gestaltung von Webseiten verwenden, sind JavaScript-basierte Lösungen flexibler und geben dir mehr Kontrolle als Standard-CSS.

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ücken und Funktionen zur Erstellung dynamischer Stile und Designs.

In diesem Artikel erfährst du, wie JSS funktioniert, welche Vorteile es hat und wie du es in deinen JavaScript-Anwendungen einsetzen kannst. Außerdem geht es um dynamisches Styling, Themes und Leistungsoptimierung. Du kannst JSS für viele Arten von Anwendungen nutzen, aber in diesem Artikel konzentrieren wir uns auf JSS für React.

Was ist JSS?

Mit JSS kannst du CSS-Stile als JavaScript-Objekte schreiben und diese Objekte als Klassennamen in Elementen oder Komponenten verwenden. JSS ist Framework-unabhängig, du kannst es also in Vanilla JavaScript oder mit Frameworks wie React und Angular verwenden.

JSS hat mehrere Vorteile gegenüber dem traditionellen CSS-Styling:

  • Dynamisches Styling – 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ängen.
  • Verbesserte Theming-Funktionen – Mit JSS kannst du Stile für ein bestimmtes Theme erstellen. Du kannst z. B. Stile für ein helles und ein dunkles Theme erstellen und diese themespezifischen Stile dann je nach Nutzerpräferenz auf die gesamte Anwendung anwenden. Wenn du React verwendest, unterstützt das React-JSS-Paket 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.
  • Verbesserte Wartbarkeit – Durch die Definition von Styles in JavaScript-Objekten kannst du zusammengehörige 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.
  • Echtes CSS – JSS generiert echtes CSS anstelle von Inline-Styles, die unübersichtlich und schwer zu verwalten sein können. JSS verwendet standardmäßig eindeutige Klassennamen, um Namenskollisionen zu vermeiden, die durch die globale Natur von CSS verursacht werden.

Wie man Styles mit JSS schreibt

Dieser Artikel basiert auf einem React-Projekt. Er verwendet das Paket react-jss, das JSS über die API Hooks in React integriert. react-jss wird mit den Standard-Plugins ausgeliefert und ermöglicht es dir, JSS mit minimalen Einstellungen zu verwenden.

Grundlegende Syntax und Verwendung von JSS in React

Um JSS in React zu verwenden, installierst du zunächst das Paket react-jss mit einem Paketmanager wie npm oder Yarn.

Die Syntax zum Schreiben von Stilen in JSS beinhaltet die Definition von CSS-Regeln für bestimmte Elemente innerhalb eines JavaScript-Objekts. Der folgende Code definiert zum Beispiel die Stile für eine Schaltfläche in einer React-Anwendung.


const styles = {
      button: {
            padding: "10px 20px",
            background: "#f7df1e",
            textAlign: "center",
            border:"none"
      }
};

Hinweis: Die CSS-Eigenschaften sind in Großbuchstaben geschrieben.

Um diese Stile auf ein HTML-Element anzuwenden:

  1. Erzeuge die Klassen, indem du die Stile an die createUseStyles() Methode von react-jss weitergibst:
import { createUseStyles } from "react-jss";
const styles = {
       button: {
             padding: "10px 20px",
             background: "#f7df1e",
             textAlign: "center",
             border:"none"
       }
};
const useStyles = createUseStyles(styles);
  1. Wende das CSS auf das Schaltflächenelement an, indem du den generierten Klassennamen verwendest:
const App = () = > {
      const classes = useStyles();
      return (
            < button className={classes.button} > </button >
      );
};

Dieser Code erstellt eine React-Komponente und wendet die Stile auf das styles Objekt an.

Umgang mit Pseudo-Klassen, Media Queries und Keyframes

JSS unterstützt alle bestehenden CSS-Funktionen, einschließlich Pseudoklassen, Media Queries und Keyframes. Verwende die gleiche Syntax wie bei regulären CSS-Stilregeln, um Stile für diese Funktionen zu definieren.

Pseudo-Klassen

Angenommen, du möchtest dem Button eine Pseudoklasse für den Schwebezustand hinzufügen, damit sich die Hintergrundfarbe ändert, wenn ein Nutzer mit der Maus darüber fährt. Der folgende Code implementiert diese Pseudoklasse, so dass der Hintergrund der Schaltfläche beim Überfahren hellgrün wird:

const styles = {
      button: {
            padding: "10px 20px",
            background: "#f7df1e",
            textAlign: "center",
            border:"none",
            '&:hover': {
                  backgroundColor: 'lightgreen',
            }
     }
};

Keyframes

Du kannst auch eine Keyframe-Animation auf eine Komponente anwenden, indem du die Regel @keyframes verwendest. Im Folgenden siehst du zum Beispiel ein Stilobjekt für eine sich drehende Komponente.

const styles = {
       '@keyframes spin': {
             '0%': {
                   transform: 'rotate(0deg)',
             },
             '100%': {
                   transform: 'rotate(360deg)',
             },
       },
       spinner: {
              width: "100px",
              height: "100px",
              backgroundColor: "lightgreen",
              animation: '$spin 1s linear infinite',
       },
}

In der Funktion Stile hast du mit der Regel @keyframes eine Keyframe-Animation namens spin definiert. Dann erstellst du eine Klasse mit dem Namen spinner, die die Animation unter Verwendung der $ Syntax anwendet, um die Keyframe-Animation zu referenzieren.

Medienabfragen

Medienabfragen verwenden auch in JSS die übliche CSS-Syntax. Um zum Beispiel die Schriftgröße einer Schaltfläche für eine bestimmte Bildschirmgröße zu ändern, verwendest du die folgenden Stile:

const styles = {
      button: {
            fontSize: "12px",
            '@media (max-width: 768px)': {
                  fontSize: '34px',
            },
      }
};

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öglichkeiten von JavaScript nutzen kannst, um deine Stile dynamisch zu gestalten.

Dynamisches Styling mit JSS

Dynamisches Styling bedeutet, Stile zu erstellen, die sich in Abhängigkeit von bestimmten Bedingungen ändern. In React können sich die Stile abhängig von Werten wie Status, Props und Komponentenkontext ändern.

Wie man dynamische Styles mit JSS erstellt

In JSS kannst du mit JavaScript-Ausdrücken Stile bedingt auf deine Elemente anwenden und so dynamische Stilregeln erstellen.

Nehmen wir an, du hast eine Schaltfläche, die eine Eigenschaft namens bgColor erhält. Ihr Wert ist die Hintergrundfarbe der Schaltfläche. Um eine Stilregel zu erstellen, die die Hintergrundfarbe der Schaltfläche auf der Grundlage der Requisite ändert, übergibst du die Requisite an die Methode useStyles.

import { createUseStyles } from "react-jss"

const styles = {
      button: {
            padding: "10px 20px",
            background: props = >props.bgColor,
            textAlign: "center",
            border:"none"
      }
};
const Button = ({...props}) => {
  
      const useStyles = createUseStyles(styles);
      const classes = useStyles({...props});
      return (
            <button className={classes.button}>Button </button>
      );
};

Dann kannst du die Requisiten im Styles-Objekt referenzieren. Das obige Beispiel verweist auf props.bgColor.

Du kannst die gewünschte Hintergrundfarbe übergeben, wenn du die Komponente renderst. Die Komponente unten rendert zwei Button Komponenten mit den Hintergrundfarben lightgreen und yellow.

export default function App() {
  return (
    <div >
      <Button bgColor="lightgreen" />
      <div style={{ marginTop: "10px" }}></div>
      <Button bgColor="yellow" />
    </div>
  );
}
Zwei mit JSS dynamisch gestylte Schaltflächen
Zwei mit JSS dynamisch gestylte Schaltflächen

Jedes Mal, wenn du die Komponente Button renderst, kannst du den Hintergrund nach Belieben gestalten.

Du kannst die Stile auch abhängig vom Zustand einer Komponente ändern. Angenommen, du hast ein Navigationsmenü mit mehreren Links. Um den Link für die aktuelle Seite hervorzuheben, definierst du einen Statuswert namens isActive, der festhält, ob ein Menü-Link aktiv ist.

Mit einem ternären JavaScript-Operator kannst du dann den Wert von isActive überprüfen und die Farbe des Links auf blau setzen, wenn der Status true ist, und auf rot, wenn false.

const styles = {
      a: {
             color: ({ isActive }) => isActive ? 'blue' : 'red',
             padding: '10px',
      },
};

Aktive Links werden nun blau, inaktive Links werden rot.

Auf ähnliche Weise kannst du dynamisches Styling basierend auf dem Kontext erstellen. Du kannst ein Element wie UserContext basierend auf dem Wert eines Kontexts stylen, der den Online-Status des Nutzers speichert.

const { online } = useContext(UserContext);
const styles = {
      status: {
            background: online ? 'lightgreen' : '',
            width: '20px',
            height: '20px',
            borderRadius: "50%",
            display: online ? 'flex' : 'hidden'
      },
};

In diesem Beispiel hat das Element einen grünen Hintergrund, wenn der Nutzer online ist. Du setzt die Eigenschaft display auf flex, wenn der Nutzer online ist, und auf hidden, wenn der Nutzer offline ist.

Anwendungsfälle für dynamisches Styling

Dynamisches Styling ist eine leistungsstarke Funktion von JSS, für die es viele Anwendungsfälle gibt:

  • Theming – 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.
  • Bedingtes Rendering – 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äche deaktiviert ist, ein Textfeld einen Fehlerstatus hat, ein Seitennavigationsmenü geöffnet ist oder wenn ein Nutzer online ist.
  • Responsive Design – Du kannst dynamische Stile in JSS verwenden, um den Stil eines Elements je nach Breite des Viewports zu ändern. Du kannst zum Beispiel eine Reihe von Stilen für einen bestimmten Haltepunkt mithilfe von Media Queries definieren und sie abhängig von der Bildschirmgröße anwenden.

Wie du Themes mit JSS verwendest

Verwende Themes, um eine einheitliche Benutzeroberfläche für deine gesamte Anwendung zu schaffen. Es ist einfach, Themes in JSS zu erstellen – definiere einfach ein Theme-Objekt mit globalen Style-Werten, wie Farben, Typografie und Abständen. Zum Beispiel:

const theme = {
      colors: {
            primary: '#007bff',
            secondary: '#6c757d',
            light: '#f8f9fa',
            dark: '#343a40',
       },
       typography: {
             fontFamily: 'Helvetica, Arial, sans-serif',
             fontSize: '16px',
             fontWeight: 'normal',
       },
       spacing: {
             small: '16px',
             medium: '24px',
             large: '32px',
       },
};

Um Themes auf deine Komponenten anzuwenden, verwende Kontextanbieter. Die JSS-Bibliothek bietet eine ThemeProvider Komponente, die du um Komponenten wickeln kannst, die Zugriff auf das Thema benötigen.

Das folgende Beispiel umhüllt die Komponente Button mit der Komponente ThemeProvider und übergibt das Objekt theme als Prop.

import { ThemeProvider } from "react-jss";
const App = () => (
      <ThemeProvider theme={theme}>
            <Button />
      </ThemeProvider>
)

Du kannst auf das Theme in der Komponente Button mit einem useTheme() Hook zugreifen und es an das Objekt useStyles übergeben. Im folgenden Beispiel werden die im Theme-Objekt definierten Stile verwendet, um eine primäre Schaltfläche zu erstellen.

import { useTheme } from “react-jss”

const useStyles = createUseStyles({
  primaryButton: {
    background: ({ theme }) => theme.colors.primary,
    font: ({ theme }) => theme.typography.fontFamily,
    fontSize: ({ theme }) => theme.typography.fontSize,
    padding: ({ theme }) => theme.spacing.medium
  }
});

const Button = () => {
      const theme = useTheme()
      const classes = useStyles({theme})
      return (
            <div>
              <button className={classes.primaryButton}> Primary Button </button>
            </div>

      )
}

Die Schaltfläche sollte wie das Bild unten aussehen, mit schwarzem Text auf einer rechteckigen, blauen Schaltfläche.

Ein primärer Schaltflächenstil basierend auf dem Theme
Ein primärer Schaltflächenstil basierend auf dem Theme

Wenn du einen der Werte im Theme-Objekt änderst, werden automatisch neue Stile auf alle Komponenten angewendet, die mit der Komponente ThemeProvider verpackt sind. Wenn du den Wert der Primärfarbe in lightgreen änderst, wird auch die Farbe der Schaltfläche hellgrün, wie in der Abbildung unten.

Eine primäre Schaltflächenfarbe passt sich an das Theme an
Eine primäre Schaltflächenfarbe passt sich an das Theme an

Hier sind ein paar Richtlinien, die du bei der Erstellung von Designs beachten solltest:

  • Definiere das Theme-Objekt in einer separaten Datei, damit der Code übersichtlich und leicht zu pflegen ist.
  • Verwende aussagekräftige Namen für die Style-Werte, damit das Theme-Objekt einfach zu lesen und zu aktualisieren ist.
  • Verwende CSS-Variablen, um Werte zu definieren, die du häufig in deinem CSS verwendest.
  • Erstelle Standardwerte für alle Stileigenschaften, um ein einheitliches Design in deiner Anwendung zu gewährleisten.
  • Teste deine Themes gründlich, um sicherzustellen, dass sie auf allen Geräten und Browsern wie vorgesehen funktionieren.

Wenn du diese Best Practices befolgst, kannst du ein Theme erstellen, das einfach zu verwenden und leicht zu aktualisieren ist, wenn deine Anwendung wächst.

Leistung und Optimierung

JSS ist eine leistungsstarke Styling-Lösung. Mit JSS werden nur die Stile, die gerade auf dem Bildschirm verwendet werden, zum Document Object Model (DOM) hinzugefügt, was die Größe 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.

Du kannst die Vorteile zusätzlicher Leistungsoptimierungen nutzen, indem du das react-jss paket anstelle des JSS kernpaket. Zum Beispiel entfernt react-jss die Stylesheets, wenn die Komponente nicht mehr eingebunden wird. Es kümmert sich auch um die kritische CSS-Extraktion und extrahiert nur Stile aus gerenderten Komponenten. Auf diese Weise reduziert das Paket react-jss die Größe des CSS-Bündels und verbessert die Ladezeiten.

Um die Größe des CSS-Pakets weiter zu reduzieren, kannst du den Code aufteilen, um nur die CSS zu laden, die eine bestimmte Seite oder Komponente benötigt. Eine Bibliothek wie loadable-components kann das Code-Splitting vereinfachen.

Mit JSS kannst du CSS auch serverseitig generieren. Mit der Registry-Klasse StyleSheet von JSS kannst du das angehängte 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ötigt und du kannst es entfernen, um die Größe des Pakets zu verringern.

Zusammenfassung

Du hast die Grundlagen der JSS-Syntax kennengelernt und weißt, wie man Style-Objekte erstellt und auf Komponenten anwendet und wie man dynamische Styles erstellt. Du weißt auch, wie du die Komponente ThemeProvider 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.