STYLE9: CSS-in-in-Js

Facebook hat im April im vergangenen April seine wichtige Überarbeitung veröffentlicht. Dies ist ein ehrgeiziges Projekt, eine Rekonstruktion einer riesigen Website mit einer großen Anzahl von Benutzern. Um dies zu erreichen, verwendeten sie verschiedene Technologien, die sie selbst erstellt und offen bezogen haben, wie React, GraphQL, Relay und eine neue CSS-in-JS-Bibliothek namens Stylex.

Diese neue Bibliothek wird intern von Facebook verwendet, sie haben jedoch genügend Informationen geteilt, um Style9 Open Source implementieren zu können.

Warum brauchen Sie eine andere CIJ -Bibliothek?

Es gibt bereits eine große Anzahl von CSS-in-JS (CIJ) -Bibliotheken, sodass möglicherweise nicht klar ist, warum eine andere Bibliothek benötigt wird. Wie Christopher Chedeau erklärt, hat Style9 die gleichen Vorteile wie alle anderen CIJ -Lösungen, einschließlich Umfangsauswahl, Dead Code -Eliminierung, deterministische Parsen und die Fähigkeit, Werte zwischen CSS und JavaScript zu teilen.

Es gibt jedoch einige Aspekte, die Style9 einzigartig machen.

Mindestlaufzeit

Obwohl Stile in JavaScript definiert sind, werden sie vom Compiler in reguläre CSS -Dateien extrahiert. Dies bedeutet, dass die endgültige JavaScript -Datei keine Stile enthält. Das einzige, was noch übrig ist, ist der endgültige Unterrichtsname, der die kleinste Laufzeit bedingt gelten, genau wie Sie es normalerweise tun. Dies führt zu kleineren Codepaketen, reduziertem Speicherverbrauch und einem schnelleren Rendering.

Da Werte zur Kompilierungszeit extrahiert werden, können wirklich dynamische Werte nicht verwendet werden. Glücklicherweise sind diese Werte nicht häufig und da sie einzigartig sind, sind sie nicht von Inline -Definitionen betroffen. Häufiger ist die Anwendung von Stilen bedingt, was natürlich unterstützt wird. Dank Babels Weg. Bewerten Sie auch lokale Konstanten und mathematische Ausdrücke.

Atomausgang

Aufgrund der Art und Weise, wie Style9 funktioniert, kann jede Eigenschaftserklärung zu einer separaten Klasse mit einer einzigen Eigenschaft werden. Wenn wir beispielsweise Opazität an mehreren Stellen in unserem Code verwenden, existiert es nur einmal im generierten CSS. Der Vorteil davon ist, dass die Größe der CSS -Datei mit der Anzahl der eindeutigen Deklarationen wächst, nicht mit der Gesamtzahl der Erklärungen. Da die meisten Eigenschaften mehrfach verwendet werden, kann dies zu einer großen Verringerung der CSS -Datei führen. Zum Beispiel verwendete die alte Homepage von Facebook 413 kb GZIP -komprimierte CSS. Nach der Überarbeitung beträgt die CSS -Größe aller Seiten 74 kb. In ähnlicher Weise führen kleinere Dateigrößen zu einer besseren Leistung.

Einige Leute beschweren sich vielleicht darüber und denken, dass die generierten Klassennamen nicht semantisch sind, dass sie undurchsichtig sind und Kaskaden ignorieren. Das ist wahr. Wir betrachten CSS als Kompilierungsziel. Aber es gibt einen guten Grund. Indem wir die zuvor als am besten angesehenen Praktiken in Frage stellen, können wir die Erfahrung sowohl für Benutzer als auch für Entwickler verbessern.

Darüber hinaus verfügt Style9 über viele andere leistungsstarke Funktionen, darunter: Typed Styles mit Typenkript, eliminierende ungenutzte Stile, die Möglichkeit, JavaScript-Variablen zu verwenden und Medienabfragen, Pseudo-Selektoren und Keyframes zu unterstützen.

Wie man es benutzt

Installieren Sie es zunächst wie gewohnt:

 <code>npm install style9</code>

Style9 verfügt über Plugins für Rollup, WebPack, Gatsby und Next.js, die alle auf Babel -Plugins basieren. Anweisungen zur Verwendung, wie sie verwendet werden, finden Sie im Repository. Hier verwenden wir das Webpack -Plugin.

 <code>const Style9Plugin = require('style9/webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { module: { rules: [ // 这将转换style9调用{ test: /\.(tsx|ts|js|mjs|jsx)$/, use: Style9Plugin.loader }, // 这是正常的Webpack CSS提取的一部分{ test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'] } ] }, plugins: [ // 这将对最终的CSS文件中的声明进行排序并删除重复的声明new Style9Plugin(), // 这是正常的Webpack CSS提取的一部分new MiniCssExtractPlugin() ] };</code>

Stile definieren

Die Syntax zum Erstellen von Stilen ist anderen Bibliotheken sehr ähnlich. Wir rufen zuerst Style9.create mit einem Style -Objekt an:

 <code>import style9 from 'style9'; const styles = style9.create({ button: { padding: 0, color: 'rebeccapurple' }, padding: { padding: 12 }, icon: { width: 24, height: 24 } });</code>

Da alle Deklarationen Atomklassen erzeugen, werden Abkürzungen wie Flex: 1 und Hintergrund: Blau nicht funktioniert, da sie mehrere Eigenschaften festlegen. Eigenschaften, die erweitert werden können, wie Polsterung, Marge, Überlauf usw., werden automatisch in ihre vollständige Form umgewandelt. Wenn Sie TypeScript verwenden, erhalten Sie einen Fehler, wenn Sie nicht unterstützte Eigenschaften verwenden.

Analytische Stile

Um den Klassennamen zu generieren, können wir jetzt die von style9 zurückgegebene Funktion aufrufen. Es akzeptiert den Stilschlüssel, den wir als Parameter verwenden möchten:

 <code>const className = styles('button');</code>

Die Funktion funktioniert wie folgt: Der Stil auf der rechten Seite hat Vorrang und verschmilzt mit dem Stil links, genau wie Objekt. Das Folgende erzeugt ein mit 12px gefülltem Element und der Text ist Rebeccapurple.

 <code>const className = styles('button', 'padding');</code>

Wir können Stile unter Verwendung eines der folgenden Formate anwenden:

 <code>// 逻辑与styles('button', hasPadding && 'padding'); // 三元运算符styles('button', isGreen ? 'green' : 'red'); // 布尔对象styles({ button: true, green: isGreen, padding: hasPadding });</code>

Diese Funktionsaufrufe werden während der Kompilierung entfernt und durch eine direkte String -Verkettung ersetzt. Die erste Zeile im obigen Code wird durch so etwas wie 'c1r9f2e5' Haspadding ersetzt? 'cu2kwdz': ''. Es bleibt kein Laufzeitcode.

Kombinationsstile

Wir können das Style -Objekt erweitern, indem wir mit dem Eigenschaftsnamen auf das Stilobjekt zugreifen und an style9 weitergeben.

 <code>const styles = style9.create({ blue: { color: 'blue; } }); const otherStyles = style9.create({ red: { color: 'red; } }); // 将为红色const className = style9(styles.blue, otherStyles.red);</code>

Genau wie ein Funktionsaufruf hat der Stil auf der rechten Seite Vorrang. In diesem Fall kann der Klassenname jedoch nicht statisch analysiert werden. Stattdessen werden die Eigenschaftswerte durch die Klasse ersetzt und zur Laufzeit verbunden. Die Eigenschaften werden der CSS -Datei wie zuvor hinzugefügt.

Zusammenfassen

Die Vorteile von CSS-in-Js sind real. Das heißt, wenn wir Stile in unseren Code einbetten, gibt es Leistungskosten. Durch das Extrahieren von Werten zur Bauzeit können wir gleichzeitig das Beste aus beiden Welten erreichen. Wir können davon profitieren, Stile mit Tags zusammenzustellen und die vorhandene JavaScript -Infrastruktur zu verwenden und gleichzeitig die besten Stylesheets zu generieren.

Wenn Style9 Spaß klingt, schauen Sie sich das Repository an und versuchen Sie es aus. Wenn Sie Fragen haben, können Sie Fragen stellen oder uns kontaktieren.

Anerkennung

Dank Giuseppe Gurgone für seine Arbeit an Stilblatt und DSS, Nicolas Gallagher für seine Arbeit an React-Native-Web, Satyajit Sahoo und allen Mitgliedern von CallStack für ihre Arbeit über Linaria, Christopher Chedeau, Sebastian McKenzie, Frank Yan, Ashley-Watkins, Naman-Goel und alle, die sich auf den Weg zum Lusthley-Watkins-Teilen und -verbund aufweisen. Und alle anderen Leute, die ich vermisst habe.

Link

• Johanholmerin/Style9
• Erstellen Sie einen neuen Facebook.com mit React, GraphQL und Relay - 30. April 2019
• Bauen Sie ein neues Facebook mit React und Relay | Frank Yan - 30. Oktober 2019
• Der Tech -Stack -Wiederaufbau von New Facebook.com - 8. Mai 2020
• Johanholmerin/Style9-Komponenten.Macro: Styled Components API für Style9-Experimental

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