Die CSS-in-React-Landschaft

Viele CSS-in-JS-Bibliotheken finden zwar theoretisch und agnostisch, finden ihre Hauptverwendung innerhalb von React-Projekten. Dies ist hauptsächlich auf das Fehlen einer eingebauten Styling-Lösung durch React zurückzuführen, im Gegensatz zu Vue, Sufle oder Winkel. Dieser "Bring-Your-Own" -Ansatz bietet Flexibilität, erfordert jedoch eine Auswahl der Stylingstrategie. Während einfaches CSS eine praktikable Option bleibt, bieten CSS-in-JS-Bibliotheken Vorteile wie:

• Style Co-Lokation mit Komponenten
• Komponenten-gescopte Stile
• Prop-gesteuerte Styling-Variationen
• JavaScript -Integration innerhalb von CSS
• Themenfunktionen

Jede Bibliothek bietet einzigartige Merkmale, häufig Variationen oder Erweiterungen der oben genannten. Wichtig ist, dass die Verwendung von JavaScript für Style Authoring nicht immer JavaScript-basierte Style- Versand bedeutet. "Zero Runtime" -Bibliotheken kompilieren während des Build -Prozesses Stile zu CSS und verbessern die Leistung.

Dieser Überblick wird von Frontend Masters, dem offiziellen Lernpartner von CSS-Tricks, unterstützt.

Front-End-Entwicklungstraining

Frontend Masters bietet umfassende Kurse zu führenden Front-End-Technologien an, einschließlich fortschrittlicher React-Training.

Betrachten Sie den Intermediate React -Kurs

Beachten Sie vor der Erforschung der Bibliotheken:

• Meine Erfahrung mit jeder Bibliothek variiert; CSS -Module sind meine umfangreichsten. Die Demos sind grundlegend.
• Korrekturen und Ergänzungen sind durch Kommentare oder das Kontaktformular willkommen.
• Ziel ist es, Beispiele für funktionale Code für eine einfache Referenz bereitzustellen.

Enthalten Frameworks

• Stilkomponenten
• CSS -Module
• Emotion
• Stiche
• Vanilla-Extract
• JSS
• Linaria
• Gestylt JSX
• Goober

Bibliothekszusammenfassungen

Stydled-Komponenten: äußerst beliebt, bekannt für dynamisches Styling und prop-basierte Variationen. Verwendet eine Template Literal -Syntax, die CSS ähnelt, obwohl auch die Objektsyntax unterstützt wird. Bietet SSR an, ist aber nicht "Zero Runtime".

CSS-Module: Einfache, Scopes-Stile und fördert den Co-Standort. Seine Schlüsselmerkmale ist die Komposition (Mixin-ähnliche Klassenkombinationen). Es handelt sich um eine Lösung nur für Build-Process, die eine echte "Zero-Laufzeit" -Fähigkeit bietet, wenn CSS extrahiert wird. Arbeitet mit HMR und ist mit SASS kompatibel. In next integriert.js.

Emotion: Ermöglicht das CSS -Styling mit JavaScript und bietet Stilkomposition, Quellkarten, Beschriftungen und Testversorgungsunternehmen. Unterstützt sowohl String- als auch Objektstile. Ähnlich wie mit gestalteten Komponenten, jedoch mit potenziellen Leistungsunterschieden. Unterstützt SSR, ist aber nicht Null-Runtime. Glamourös, Glamour und Glamour sind zugunsten von Emotionen veraltet.

Stiche: verfügt über eine robuste API -Varianten, eine hervorragende Integration von Typscript -Editors, die Unterstützung von Themen und die Erstellung von Versorgungsunternehmen. Bietet SSR an, nähert sich der Zero-Runtime, generiert aber keine CSS-Dateien direkt.

Vanilla-extrahiert: vor allem eine SSR-Lösung; "Zero Runtime", es sei denn, bestimmte Laufzeitfunktionen sind aktiviert. Bietet eine hervorragende Integration von Typscript -Editor, eine Varianten -API und eine Rezepte -API (ähnlich wie Stiche). Unterstützt Themen- und Versorgungskurse über Streusel. Eine starke Alternative zum inzwischen vorbereiteten Aphrodite.

JSS: Beinhaltet die React -Integration, eine Extend -Syntax und eine Plugin -Architektur.

Linaria: Ein Pionier von "Zero Runtime" -CSS-in-JS, das zu CSS-Dateien kompiliert, aber eine Laufzeit für dynamische Elemente beibehält. Ähnlich wie bei den gestalteten Komponenten in der API. Unterstützt kritische CSS.

Styled JSX: Ein Babel -Plugin, das einen Build -Prozess erfordert. Verwendet a

Goober: A lightweight (1.25KB) library with a feature set similar to styled-components and Emotion.

Additional Resources

• Shopify's library selection research.
• Facebook's in-development "StyleX" (currently un-open-sourced).
• "Style9," a library aiming to replicate StyleX's features.
• Tailwind CSS (with just-in-time mode) for atomic CSS.
• Styled System, a React-oriented approach to atomic styling.
• Twin, another React-friendly atomic styling solution.
• CSS-in-JS Playground, showcasing various libraries including Fela and Radium.

1. "TypeScript editor experience" refers to TypeScript's code completion capabilities, enhancing developer workflow in editors like VS Code.

Das obige ist der detaillierte Inhalt vonDie CSS-in-React-Landschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!