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!