CSS-in-JS ist nicht automatisch schlecht.
Es löst reale Probleme:
- Komponentenebene Stil-Kollokation
- Thema-Zusammensetzung
- dynamische Varianten
- Vermeidung großer globaler Stylesheets
Die Performance-Kosten ergeben sich daraus, dass einige CSS-in-JS-Ansätze zur Laufzeit arbeiten, was statisches CSS nicht tut.
Das ist der Teil, den Teams ehrlich bewerten sollten.
Nicht Alle CSS-in-JS Sind Gleich
Es gibt zwei breite Kategorien:
- Laufzeitsysteme, die Stile im Browser generieren und injizieren
- Kompilierungszeit-Systeme, die Stile im Voraus extrahieren
Diese haben sehr unterschiedliche Leistungsprofile.
Wenn Ihre Styling-Bibliothek Regeln während des Renderns generiert, zahlen Sie dafür auf der Client-Seite. Wenn Ihre Stile zur Bauzeit extrahiert werden, sind die Laufzeitkosten viel geringer.
Diese Unterscheidung ist wichtiger als das Etikett.
Warum Statisches CSS Oft Gewinnt
Statisches CSS, ob handgeschrieben, extrahiert oder utilitätsorientiert, verlagert mehr Arbeit auf die Bauzeit und lässt den Browser das tun, was er bereits gut kann:
- Stile einmal herunterladen
- sie zwischenspeichern
- sie ohne eine JavaScript-Styling-Engine im Hotpath anwenden
Das ist ein Grund, warum Tailwind in großen Anwendungen betriebswirtschaftlich einfach erscheinen kann. Der Kompromiss sind andere Ergonomien, nicht Magie.
Der React-Aspekt
Die Laufzeit-Stileinfügung kann auch das Rendering komplizieren, da die Stileinfügung Anforderungsreihenfolgen hat.
Deshalb stellt React useInsertionEffect für CSS-in-JS-Bibliotheksautoren bereit. Es ist kein Beweis dafür, dass CSS-in-JS kaputt ist. Es ist ein Beweis dafür, dass Laufzeit-Styling Koordinationskosten hat, die statisches CSS weitgehend vermeidet.
Eine Nützlichere Entscheidungsregel
Wählen Sie Laufzeit-CSS-in-JS, wenn:
- das Styling hochgradig dynamisch ist
- das Team diese Ergonomien stark wertschätzt
- das Leistungsbudget die clientseitige Arbeit verkraften kann
Wählen Sie statisches oder extrahiertes CSS, wenn:
- die Startkosten wichtig sind
- mobile Geräte eine wesentliche Einschränkung darstellen
- das Designsystem zum größten Teil zur Bauzeit bekannt ist
Das ist ein Bereich, in dem "Null-Laufzeit" eine bedeutungsvolle Eigenschaft ist und nicht nur ein Marketingbegriff.
Tailwind Ist Eine Gültige Antwort
Tailwind ist nicht besser, weil es modern ist. Es ist nützlich, weil es viele Stilentscheidungen in Ausgabe zur Bauzeit und vorhersehbare Klassennamen umwandelt.
Wenn das zum Team passt, ist es ein solider Kompromiss.
Wenn nicht, können extrahierte CSS-Module oder andere Ansätze zur Kompilierungszeit ähnliche Laufzeitvorteile bieten, ohne überall Utilitätsklassen zu übernehmen.
Weitere Informationen