Wussten Sie, dass mehr als 97% aller Webseiten CSS zur Gestaltung verwenden?
Cascading Style Sheets, kurz CSS, ermöglichen es Entwicklern, ansprechende, gut strukturierte und übersichtliche Webseiten zu gestalten.
Die CSS-Sprache definiert, wie Dokumente dem Endnutzer präsentiert werden. In diesem Kontext ist ein Dokument eine Datei, die in einer Auszeichnungssprache wie XML oder HTML verfasst ist.
Styling in React: Was bedeutet das?
Die leichte Erstellung, Ausführung und Wartung von React-Anwendungen sind die Hauptgründe für ihre Beliebtheit. React ist eher eine JavaScript-Bibliothek als ein Framework und bietet daher mehr als nur vorgefertigte Funktionen und Code-Schnipsel.
Die Verfügbarkeit wiederverwendbarer Komponenten, seine Flexibilität, die Code-Stabilität, die Schnelligkeit und die Performance sind nur einige Gründe, warum React in der Welt der JavaScript-Frameworks und -Bibliotheken so hoch angesehen ist.
Styling in React bedeutet, verschiedene Komponenten einer React-Anwendung mit Hilfe von CSS optisch ansprechend zu gestalten. Wichtig ist dabei, dass React anstelle von HTML die Auszeichnungssprache JSX (JavaScript und XML) verwendet. Einer der Hauptunterschiede liegt darin, dass HTML `.class` zur Bezeichnung von Klassen nutzt, während JSX `.className` dafür verwendet.
Warum React mit CSS gestalten?
- Gestalten Sie Ihre Anwendung responsiv. Moderne Webanwendungen sollten sowohl auf kleinen als auch auf großen Bildschirmen optimal nutzbar sein. CSS ermöglicht die Anwendung von Media Queries, um Ihre React-Anwendung an unterschiedliche Bildschirmgrößen anzupassen.
- Beschleunigen Sie den Entwicklungsprozess. Sie können dieselben CSS-Regeln für mehrere Komponenten Ihrer React-Anwendung wiederverwenden.
- Machen Sie die React-Anwendung wartbarer. Die Anpassung des Erscheinungsbildes bestimmter Komponenten oder Bereiche Ihrer Anwendung ist mit CSS unkompliziert.
- Verbesserte Benutzererfahrung. CSS ermöglicht eine benutzerfreundliche Formatierung. Eine React-Anwendung mit Texten und Schaltflächen an logischen Stellen ist leicht zu navigieren und zu bedienen.
Es gibt verschiedene Ansätze, die Entwickler zur Gestaltung ihrer React-Anwendungen nutzen können. Hier sind einige der gängigsten:
Inline-Styles schreiben
Inline-Styles sind der unkomplizierteste Weg, eine React-Anwendung zu gestalten, da kein externes Stylesheet erstellt werden muss. Das CSS-Styling wird direkt im React-Code angewendet.
Es ist wichtig zu wissen, dass Inline-Styles eine hohe Priorität gegenüber anderen Styles haben. Wenn Sie also ein externes Stylesheet mit bestimmten Formatierungen verwenden, werden diese durch den Inline-Style überschrieben.
Hier ist eine Veranschaulichung von Inline-Styling in einer React-Anwendung:
import React from 'react';
import ReactDOM from 'react-dom/client';
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hallo Welt!!!!!</h1>
<h2>Ein bisschen Stil hinzufügen!</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
Das dargestellte Element zeigt ein h1 mit hellblauem Hintergrund.
Vorteile des Inline-Stylings
- Schnell. Es ist der einfachste Ansatz, da Sie den Stil direkt dem Element zuweisen, das gestaltet werden soll.
- Hohe Priorität. Inline-Styles überschreiben externe Stylesheets. So können Sie sich auf eine spezifische Funktion konzentrieren, ohne die gesamte Anwendung zu verändern.
- Ideal für Prototyping. Sie können Inline-Styles verwenden, um Funktionen zu testen, bevor Sie die Formatierung in ein externes Stylesheet integrieren.
Nachteile des Inline-Stylings
- Kann aufwendig sein. Jedes Element einzeln zu gestalten, ist zeitaufwendig.
- Eingeschränkt. CSS-Funktionen wie Selektoren und Animationen können nicht mit Inline-Styles verwendet werden.
- Zu viele Inline-Styles können den JSX-Code schwer lesbar machen.
Externe Stylesheets importieren
Sie können CSS in einer externen Datei schreiben und diese in Ihre React-Anwendung importieren. Dieser Ansatz ähnelt dem Einbinden einer CSS-Datei in das <head>-Tag eines HTML-Dokuments.
Dafür müssen Sie eine CSS-Datei in Ihrem Anwendungsverzeichnis anlegen, sie in Ihre Zielkomponente importieren und Stilregeln für Ihre Anwendung schreiben.
Um zu demonstrieren, wie externe CSS-Stylesheets funktionieren, können Sie eine CSS-Datei erstellen und sie `App.css` nennen. Diese können Sie dann wie folgt exportieren:
import { React } from "react";
import "./Components/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;
Das obige Code-Snippet importiert ein externes Stylesheet in die `App.js`-Komponente. Die `App.css`-Datei befindet sich im Ordner „Components“.
Vorteile externer CSS-Stylesheets
- Wiederverwendbar. Sie können dieselben CSS-Regeln für verschiedene Komponenten in einer React-Anwendung verwenden.
- Macht den Code übersichtlicher. Code ist leichter verständlich, wenn externe Stylesheets verwendet werden.
- Ermöglicht den Zugriff auf erweiterte CSS-Funktionen. Sie können Pseudoklassen und erweiterte Selektoren nutzen, wenn Sie externe Stylesheets verwenden.
Nachteile externer CSS-Stylesheets
- Erfordert eine sorgfältige Namenskonvention, um sicherzustellen, dass Stile nicht überschrieben werden.
CSS-Module verwenden
React-Anwendungen können sehr umfangreich werden. CSS-Animationsnamen und Klassennamen sind standardmäßig global gültig. Diese Einstellung kann bei großen Stilvorlagen problematisch sein, da ein Stil einen anderen überschreiben kann.
CSS-Module lösen diese Herausforderung, indem sie Animations- und Klassennamen lokal definieren. Dadurch wird sichergestellt, dass Klassennamen nur innerhalb der Datei oder Komponente verfügbar sind, in der sie benötigt werden. Jeder Klassenname erhält einen eindeutigen, programmatischen Namen, wodurch Konflikte vermieden werden.
Um CSS-Module zu implementieren, erstellen Sie eine Datei mit der Endung `.module.css`. Wenn Sie Ihr Stylesheet beispielsweise `style` nennen möchten, lautet der Dateiname `style.module.css`.
Importieren Sie die erstellte Datei in Ihre React-Komponente, und Sie können loslegen.
Ihre CSS-Datei könnte etwa so aussehen:
/* styles.module.css */
.font {
color: #f00;
font-size: 30px;
}
Sie können das CSS-Modul wie folgt in Ihre `App.js` importieren:
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hallo Leser!</h1>
);
}
export default App;
Vorteile der Verwendung von CSS-Modulen
- Einfache Integration mit SCSS und CSS
- Vermeidet Konflikte bei Klassennamen
Nachteile der Verwendung von CSS-Modulen
- Das Referenzieren von Klassennamen mit CSS-Modulen kann für Anfänger verwirrend sein.
Styled Components nutzen
Styled Components ermöglichen es Entwicklern, Komponenten mit CSS direkt im JavaScript-Code zu erstellen. Eine Styled Component fungiert als React-Komponente, die bereits mit Stilen versehen ist. Styled Components bieten dynamisches Styling und eindeutige Klassennamen.
Um mit der Verwendung von Styled Components zu beginnen, können Sie das Paket mit folgendem Befehl in Ihrem Stammverzeichnis installieren:
npm install styled-components
Der nächste Schritt ist das Importieren von Styled Components in Ihre React-Anwendung.
Das folgende ist ein Code-Snippet von `App.js`, das Styled Components verwendet:
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 80%;
height: 120px;
background-color: lightblue;
display: block;
`;
return <Wrapper />;
}
export default App;
Die oben genannten Stile aus Styled Components werden in die gerenderte Anwendung importiert.
Vorteile von Styled Components
- Es ist vorhersagbar. Styles in diesem Styling-Ansatz sind in einzelne Komponenten eingebunden.
- Sie müssen sich nicht um die Namenskonventionen Ihrer Klassen kümmern. Schreiben Sie einfach Ihre Stile, und das Paket kümmert sich um den Rest.
- Sie können Styled Components als Requisiten exportieren. Styled Components verwandeln normales CSS in React-Komponenten. Sie können diesen Code wiederverwenden, Stile durch Requisiten erweitern und exportieren.
Nachteile von Styled Components
- Sie müssen eine Drittanbieter-Bibliothek installieren, um sie zu verwenden.
Syntactically Awesome Style Sheets (SASS/SCSS)
SASS bietet leistungsfähigere Werkzeuge und Funktionen als normales CSS. Sie können Stile in zwei verschiedenen Formaten schreiben, die von diesen Erweiterungen unterstützt werden: `.scss` und `.sass`.
Die Syntax für SASS ist ähnlich der von gewöhnlichem CSS. Sie benötigen jedoch keine öffnenden und schließenden geschweiften Klammern, wenn Sie Stilregeln in SASS schreiben.
Ein einfacher Ausschnitt von SASS sieht folgendermaßen aus:
nav
ul
margin-right: 20px
padding: 0
list-style: list
li
display: block
a
display: block
padding: 6px 12px
text-decoration: underline
nav
Um mit der Verwendung von SASS in Ihrer React-Anwendung zu beginnen, müssen Sie SASS zunächst in einfaches CSS kompilieren. Nachdem Sie Ihre Anwendung mit dem Befehl `create-react-app` eingerichtet haben, können Sie `node-sass` installieren, um die Kompilierung zu übernehmen.
npm install node-sass
Sie können dann Ihre Dateien erstellen und ihnen die Endung `.scss` oder `.sass` geben. Anschließend können Sie Ihre Dateien ganz normal importieren. Zum Beispiel:
import "./Components/App.sass";
Vorteile von SASS/SCSS
- Es verfügt über viele dynamische Funktionen wie Mixins, Verschachtelung und Vererbung.
- Sie benötigen weniger Boilerplate-Code, wenn Sie CSS-Code mit SASS/SCSS schreiben.
Nachteile von SASS/SCSS
- Stile sind global, daher können Probleme in Bezug auf die Priorität auftreten.
Welcher Styling-Ansatz ist der beste?
Nachdem wir fünf Ansätze besprochen haben, fragen Sie sich wahrscheinlich, welcher der beste ist. Es ist schwierig, einen klaren Gewinner in dieser Diskussion zu bestimmen. Die folgenden Überlegungen werden Ihnen jedoch helfen, eine fundierte Entscheidung zu treffen:
- Die Leistungsmetriken
- Ob Sie ein Designsystem benötigen
- Die einfache Optimierung Ihres Codes
Inline-Styling eignet sich gut, wenn Sie eine einfache Anwendung mit wenigen Codezeilen haben. Alle anderen Ansätze – extern, SASS, Styled Components und CSS-Module – eignen sich für größere Anwendungen.
Was sind die Best Practices für die Verwaltung von CSS in einer großen React-Anwendung?
- Vermeiden Sie Inline-Styling. Das Schreiben von Inline-CSS-Styles für jedes Element in einer großen React-Anwendung kann sehr anstrengend sein. Verwenden Sie stattdessen ein externes Stylesheet, das Ihren Anforderungen entspricht.
- Überprüfen Sie Ihren Code mit einem Linter. Linter wie Stylelint heben Stilfehler in Ihrem Code hervor, sodass Sie sie frühzeitig beheben können.
- Führen Sie regelmäßige Code-Reviews durch. Das Schreiben von CSS macht zwar Spaß, aber regelmäßige Code-Reviews helfen, Fehler frühzeitig zu erkennen.
- Automatisieren Sie Tests Ihrer CSS-Dateien. Enzyme und Jest sind großartige Tools, mit denen Sie Tests für Ihren CSS-Code automatisieren können.
- Halten Sie Ihren Code DRY (Don’t Repeat Yourself). Wenn Sie häufig verwendete Stile wie Farben und Ränder verwenden, sollten Sie Hilfsvariablen und Klassen nach dem DRY-Prinzip einsetzen.
- Verwenden Sie Namenskonventionen wie Block Element Modifier. Ein solcher Ansatz erleichtert das Schreiben von CSS-Klassen, die leicht verständlich und wiederverwendbar sind.
Fazit
Oben wurden einige Möglichkeiten zur Gestaltung von React-Anwendungen aufgeführt. Die Wahl des Styling-Ansatzes hängt von Ihren Bedürfnissen, Fähigkeiten und Vorlieben ab. Sie können sogar verschiedene Styling-Ansätze in Ihrer React-Anwendung kombinieren, wie z.B. Inline- und externe Stylesheets.
Sie können auch einige der besten CSS-Frameworks und Bibliotheken für Frontend-Entwickler erkunden.