Die ungesehenen Performance-Kosten moderner CSS-in-JS-Bibliotheken

Dieser Artikel enthält viele Daten von Aggelos Arvanitakis. Aber lassen Sie mich mich auf seinen abschließenden Rat konzentrieren.

Prüfen Sie, ob eine Zero-Runtime CSS-in-JS-Bibliothek für Ihr Projekt geeignet ist. Manchmal neigen wir dazu, CSS in JS für die DX (Developer Experience) zu bevorzugen, die es bietet, ohne Zugriff auf eine erweiterte JS-API zu benötigen. Wenn Ihre App keine Unterstützung für Theming benötigt und die css-Prop nicht intensiv und komplex nutzt, dann könnte eine Zero-Runtime CSS-in-JS-Bibliothek eine gute Wahl sein.

„Zero-Runtime“ bedeutet, dass Sie Ihre Stile in einer CSS-in-JS-Syntax schreiben, aber das Ergebnis sind .css-Dateien, wie sie jeder andere CSS-Präprozessor auch produzieren würde. Dies verschiebt das Werkzeug in eine völlig andere Kategorie. Es ist nur ein Entwicklerwerkzeug, anstatt ein Werkzeug, bei dem der Nutzer der Website den Preis für dessen Nutzung zahlt.

Die Flaggschiff-Zero-Runtime CSS-in-JS-Bibliothek ist Linaria. Ich denke, die Syntax sieht wirklich gut aus.

import { css } from 'linaria';
import fonts from './fonts';

const header = css`
  text-transform: uppercase;
  font-family: ${fonts.heading};
`;

<h1 className={header}>Hello world</h1>;

Ich bin auch ein Fan der Fähigkeit, einfach nur Scoping für mich zu machen, die CSS Modules mitbringt, was auf Zero-Runtime-Art geschehen kann.

Direkter Link →