Decodierung von StyleX: Metas hochmodernes Styling-System

Jedes Jahr im Oktober findet in Goa, Indien, die größte internationale Reaktionskonferenz statt. Ja, ich spreche von React India. Dieses Jahr (2024) war für mich noch besonderer, da ich die Gelegenheit bekam, auf dieser großartigen Konferenz zu sprechen. Hier ist die Aufzeichnung meines Vortrags, falls Sie es verpasst haben, ihn live anzusehen. Wenn Sie lieber lesen als Videos anschauen, dann ist dieser Blog genau das Richtige für Sie! Lasst uns eintauchen.

Was ist StyleX?

StyleX ist Metas neue, skalierbare Styling-Bibliothek, die jetzt als primäres System hinter Plattformen wie Facebook, Instagram und WhatsApp verwendet wird. Es befasst sich mit den Schwachstellen, die bei CSS-in-JS-Ansätzen auftreten, insbesondere bei massiven React-Anwendungen. Durch das Angebot einer Hybridlösung, die die besten Funktionen von atomarem CSS und statischem CSS vereint, bietet StyleX eine effiziente, modulare und skalierbare Alternative.

Wie und warum hat Meta StyleX erstellt?

• Meta hat StyleX entwickelt, um spezifische Herausforderungen zu bewältigen, die bei herkömmlichen CSS-in-JS-Bibliotheken in Großprojekten auftreten:

1. Unbenutzte Stile: Wenn Projekte wachsen, sammelt CSS oft ungenutzte Regeln an, wodurch das Stylesheet aufgebläht wird.
2. Leistungsprobleme: CSS-in-JS-Lösungen können zu großen CSS-Dateien oder Leistungsengpässen führen, insbesondere wenn sie mit der Anwendung gebündelt sind.
3. CSS-in-JS-Bibliotheksgröße: Viele beliebte Bibliotheken, die für die Gestaltung in JavaScript verwendet werden, fügen dem Paket unnötig Gewicht hinzu, was sich auf die Ladezeiten auswirkt.

• Einführung von StyleX: Es wurde 2019 im Rahmen einer Überarbeitung der Facebook-Benutzeroberfläche erstellt und im Dezember 2023 als Open Source veröffentlicht.
• CSS-Optimierung: Vor der Verwendung von StyleX würde eine einzelne Seite auf Facebook etwa 15–45 MB an CSS-Stilen laden. Dies wurde mit StyleX durch die Verwendung eines einzigen CSS-Bundles drastisch auf etwa 200–300 KB reduziert.
• Zweck von StyleX: Es wurde entwickelt, um die Komplexität des Stylings im großen Maßstab effektiv zu verwalten. Es befasst sich mit den Herausforderungen, die entstehen, wenn zahlreiche Entwickler Tausende von Komponenten erstellen, was häufig zu Spezifitätskonflikten innerhalb von CSS führt. Durch die Bereitstellung eines strukturierten Rahmens für das Styling trägt StyleX dazu bei, Konsistenz und Klarheit im Styling-Prozess aufrechtzuerhalten.
• Generierung atomarer Klassen: Von Anfang an generiert StyleX konsistent atomare Klassen und nimmt dabei den Kompromiss in Kauf, mehrere Klassennamen pro Komponente zu haben, um die Wartbarkeit zu verbessern und Stilkonflikte zu reduzieren.

Hauptmerkmale von StyleX:

1. Atomere CSS-Generierung: StyleX verwendet die atomare CSS-Generierung, was bedeutet, dass für jede Stilregel kleine, wiederverwendbare Klassen erstellt werden. Dieser Ansatz minimiert nicht nur die Redundanz im endgültigen CSS-Bundle, sondern verbessert auch die Leistung durch Reduzierung der Gesamtgröße der Stylesheets.

2. CSS-Deduplizierung: Durch die Generierung eindeutiger Klassenkennungen für jeden Stil eliminiert StyleX effektiv doppelte Stile. Dieser Deduplizierungsprozess stellt sicher, dass jedes Eigenschafts-Wert-Paar nur einmal gerendert wird, was zusätzlich zu einer schlankeren CSS-Ausgabe beiträgt.

3. „Der zuletzt angewendete Stil gewinnt immer!“: StyleX folgt einer vorhersehbaren Styling-Regel, bei der der zuletzt angewendete Stil Vorrang hat. Diese Funktion vereinfacht das Debuggen und stärkt das Vertrauen der Entwickler, da sie Bedenken hinsichtlich widersprüchlicher Stilregeln ausräumt.

4. Optimiert für React: StyleX wurde speziell für React-Anwendungen entwickelt und integriert sich nahtlos in das React-Ökosystem. Es ermöglicht Entwicklern, Stile direkt in ihren Komponenten zu definieren und so einen kohärenteren Entwicklungsworkflow zu fördern.

5. Flow- und TypeScript-Unterstützung: StyleX ist in „Flow“ geschrieben (erstellt von Meta) und bietet außerdem robuste Unterstützung für TypeScript, wodurch typsichere APIs für Stile und Themen ermöglicht werden. Diese Typsicherheit verbessert die Zuverlässigkeit und Wartbarkeit des Codes und erleichtert die Verwaltung komplexer Styling-Szenarien.

6. Flexibles bedingtes Styling: Mit StyleX können Entwickler Stile bedingt anwenden, die auf Komponentenzuständen oder Requisiten basieren. Diese Flexibilität ermöglicht ein dynamisches Design, das sich an Benutzerinteraktionen oder Änderungen im Anwendungsstatus anpasst.

7. Scoped Styling: Die Scoped-Styling-Funktion von StyleX stellt sicher, dass Stile nur auf die Komponenten angewendet werden, für die sie bestimmt sind. Dies verhindert unbeabsichtigte Nebenwirkungen und Spezifitätsprobleme, die häufig in größeren Codebasen auftreten.

8. Weniger Laufzeitberechnungen: StyleX minimiert Laufzeitberechnungen, indem alle Stile zur Kompilierungszeit in einer statischen CSS-Datei gebündelt werden. Diese Optimierung führt zu schnelleren Renderzeiten und verbesserter Leistung, insbesondere bei größeren Anwendungen.

9. Bessere Wartbarkeit des Codes: Durch die gemeinsame Anordnung von Stilen mit ihren jeweiligen Komponenten und die Verwendung atomarer Klassen fördert StyleX eine bessere Wartbarkeit des Codes. Entwickler können Stile leicht verstehen und ändern, ohne umfangreiche Stylesheets durchsuchen zu müssen.

10. Minimale CSS-Ausgabe: Die Verwendung von atomarem CSS führt zu einer minimalen CSS-Ausgabe, was sich besonders positiv auf die Leistung auswirkt. Wenn Projekte immer größer und komplexer werden, stellt StyleX sicher, dass das CSS-Bundle ohne Einbußen bei der Funktionalität verwaltbar bleibt.

11. Funktioniert gut für Projekte aller Größen: Während StyleX für Projekte aller Größen geeignet ist, ist es bei größeren Anwendungen wirklich hervorragend. Seine Architektur ist darauf ausgelegt, die Komplexität umfangreicher Styling-Anforderungen zu bewältigen, ohne Kompromisse bei der Leistung oder Wartbarkeit einzugehen.

Mal sehen, wie es funktioniert ?‍?

Die Codebeispiele in diesem Artikel sind in React geschrieben und wir werden hauptsächlich mit zwei Komponenten arbeiten, App.jsx und Button.jsx. Werfen wir einen Blick auf die Grundstruktur dieser Komponenten, bevor wir Stile hinzufügen.

import Button from "./components/Button";

const App = () => {
  return (
    <div>
      <h1>StyleX by Meta</h1>
      <Button text="Get Started" />
    </div>
  );
};

export default App;

// Button.jsx
import PropTypes from "prop-types";

const Button = ({ text }) => {
  return <button>{text}</button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

Hinzufügen von Stilen mit StyleX

import PropTypes from "prop-types";
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  base: {
    fontSize: 18,
    backgroundColor: "black",
    color: "white",
  },
});

const Button = ({ text }) => {
  return <button {...stylex.props(styles.base)}>{text}</button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

Um diese Stile zu verwenden, müssen wir sie aus dem styleX-Paket importieren und dann die Stile mit der Methode stylex.create definieren, die ein Objekt als Parameter akzeptiert. Anschließend können wir die Stylex.props-Methode verwenden, um die Stile auf die Komponente anzuwenden.

In diesem Beispiel ist „base“ der Name des Stils, den wir anwenden möchten. Wir nennen sie in StyleX Namespaces. So sieht unsere Button-Komponente jetzt aus.

Stile zu Pseudoklassen hinzufügen

import PropTypes from "prop-types";
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  base: {
    fontSize: 18,
    backgroundColor: {
      default: "black",
      ":hover": "blue",
    },
    color: "white",
  },
});

const Button = ({ text }) => {
  return <button {...stylex.props(styles.base)}>{text}</button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

Mit StyleX ist es ziemlich einfach, Stile zu Pseudoklassen hinzuzufügen. Im vorherigen Beispiel war backgroundColor eine Zeichenfolge. Hier konvertieren wir es in ein Objekt mit dem Standardwert und einer Pseudoklasse.

Arbeiten mit Medienanfragen

import PropTypes from "prop-types";
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  base: {
    fontSize: 18,
    backgroundColor: {
      default: "black",
      ":hover": "blue",
    },
    color: "white",
    width: {
      default: "100px",
      "@media (max-width: 476px)": "100%",
    },
  },
});

const Button = ({ text }) => {
  return <button {...stylex.props(styles.base)}>{text}</button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

Eine Sache, die wir in StyleX im Vergleich zu anderen Styling-Bibliotheken anders machen, sind die Medienabfragen. Hier wenden wir je nach Anforderung Medienabfragen auf jeden Namensraum an. In diesem Beispiel definieren wir die Breite der Schaltfläche auf 100 Pixel für größere Bildschirme und 100 % Breite für kleinere Bildschirme oder mobile Geräte.

Mal sehen, wie „der zuletzt angewendete Stil immer gewinnt“

Erweitern wir das vorherige Beispiel, um zu sehen, wie wir verschiedene Varianten dieser Schaltfläche erstellen können.

const styles = stylex.create({
  base: {
    fontSize: 18,
    backgroundColor: {
      default: "teal",
      ":hover": "blue",
    },
    color: "white",
    width: {
      default: "100px",
      "@media (max-width: 476px)": "100%",
    },
  },
  highlighted: {
    backgroundColor: "orange",
  },
  danger: {
    backgroundColor: "red",
  },
  primary: {
    backgroundColor: "green",
  },
});

const Button = ({ text, isHighlighted, variant }) => {
  return (
    <button
      {...stylex.props(
        styles.base,
        isHighlighted && styles.highlighted, // conditional styling
        styles[variant]
      )}
    >
      {text}
    </button>
  );
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
  isHighlighted: PropTypes.bool,
  variant: PropTypes.oneOf(["danger", "primary"]),
};

Fügen wir der Methode stylex.create noch ein paar Namespaces hinzu und versehen sie mit verschiedenen Hintergrundfarben. Darüber hinaus akzeptieren wir zwei neue Requisiten in unserer Button-Komponente. isHighlighted ist eine boolesche Requisite, die wir verwenden, um den hervorgehobenen Namespace anzuwenden. Und Variante ist eine Requisite, die wir verwenden, um den primären, gefährlichen oder hervorgehobenen Namespace anzuwenden.

// App.jsx
import Button from "./components/Button";

const App = () => {
  return (
    <div>
      <h1>StyleX by Meta</h1>
      <div {...stylex.props(styles.main)}>
        <Button text="Base Button" />
        <Button text="Highlighted Button" isHighlighted />
        <Button text="Danger Button" isHighlighted variant="danger" />
        <Button text="Primary Button" variant="primary" />
      </div>
    </div>
  );
};

export default App;

Wir erstellen ein paar weitere Kopien der Button-Komponente, wobei verschiedene Requisiten weitergegeben werden. So sieht unsere App jetzt aus.

Schauen Sie sich nun „Danger Button“ genauer an. Auch wenn wir „isHighlighted“ als „true“ übergeben haben, wird der hervorgehobene Namespace nicht angewendet. Die Gefahrenvariante wird zuletzt erwähnt und daher angewendet. Daher hat die Schaltfläche eine rote Hintergrundfarbe.

Überschreiben von Stilen vom übergeordneten Element

Wir könnten die Stileigenschaften dieser Button-Komponente direkt aus App.jsx überschreiben.

import Button from "./components/Button";

const App = () => {
  return (
    <div>
      <h1>StyleX by Meta</h1>
      <Button text="Get Started" />
    </div>
  );
};

export default App;

In diesem Beispiel lässt der Override-Namespace derzeit alle Eigenschaften zu. StyleX gibt uns jedoch die Möglichkeit, einzuschränken, welche Eigenschaften überschrieben werden können. Diese Funktion ist besonders nützlich, wenn Sie TypeScript verwenden.

// Button.jsx
import PropTypes from "prop-types";

const Button = ({ text }) => {
  return <button>{text}</button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

Diese Einschränkung stellt sicher, dass nur die Eigenschaften „backgroundColor“ und „color“ überschrieben werden können.

Wie funktionieren atomare Klassen (Interna)

Wenn Sie zum vorherigen Beispielcode scrollen, werden Sie sehen, dass wir den Stil „margin: „1rem““ zu drei verschiedenen Namespaces hinzugefügt haben – „main“ in App.jsx, „highlighted“ und „primary“ in Button.jsx. Wenn wir das Element mit Devtools untersuchen, können wir sehen, dass die verschiedenen Komponenten (Hauptcontainer, hervorgehobene Schaltfläche und primäre Schaltfläche) mit demselben Klassennamen verknüpft sind und es nur eine Klasse x42y017 gibt, die den Stil „margin: „1rem““ enthält.

Auf diese Weise hat StyleX seine Bundle-Größe durch den Einsatz atomarer Klassen erheblich reduziert. Nach Erreichen eines bestimmten Schwellenwerts werden keine neuen Klassen mehr generiert; Stattdessen verwenden sie einfach die vorhandenen Klassen wieder.

Globale Variablen und Themen

Es ist großartig, Stile auf granularer Ebene überschreiben zu können! Allerdings müssen alle Designsysteme Design-Tokens und Themes unterstützen. Hier kommt StyleX ins Spiel. Das Design der Theming-APIs in StyleX ist direkt von den Kontext-APIs von React inspiriert. Variablen werden mit Standardwerten definiert, ähnlich wie React-Kontexte erstellt werden, und Designs können erstellt werden, um unterschiedliche Werte für diese Variablen für UI-Unterbäume bereitzustellen.

Wir können globale Stile erstellen, indem wir eine x.stylex.js-Datei erstellen. Beachten Sie unbedingt diese Namenskonvention. In dieser Datei verwenden wir stylex.defineVars wie unten gezeigt.

import PropTypes from "prop-types";
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  base: {
    fontSize: 18,
    backgroundColor: "black",
    color: "white",
  },
});

const Button = ({ text }) => {
  return <button {...stylex.props(styles.base)}>{text}</button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

Wir beziehen uns auf das bevorzugte Theme des Benutzers und setzen es auf einen konstanten Wert – DUNKEL. Lassen Sie uns außerdem ein neues Thema mit dieser Farbvariablen erstellen.

import PropTypes from "prop-types";
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  base: {
    fontSize: 18,
    backgroundColor: {
      default: "black",
      ":hover": "blue",
    },
    color: "white",
  },
});

const Button = ({ text }) => {
  return <button {...stylex.props(styles.base)}>{text}</button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

Sobald das Thema erstellt ist, kann es wie jeder andere Stil in StyleX verwendet werden.

import PropTypes from "prop-types";
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  base: {
    fontSize: 18,
    backgroundColor: {
      default: "black",
      ":hover": "blue",
    },
    color: "white",
    width: {
      default: "100px",
      "@media (max-width: 476px)": "100%",
    },
  },
});

const Button = ({ text }) => {
  return <button {...stylex.props(styles.base)}>{text}</button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

So können wir dieselbe Seite mit myCustomTheme jeweils im hellen und dunklen Modus sehen.

Das ist ein Wrap?

Hurra! Wir haben den Kern der Arbeit mit StyleX erfolgreich verstanden. Vielen Dank, dass Sie diesen Artikel gelesen haben. Ich hoffe, es hat ein gutes Verständnis dafür vermittelt, was StyleX ist, wie Meta es erstellt hat und wie man es verwendet. Bitte teilen Sie Ihre Gedanken/Fragen im Kommentarbereich oder auf Twitter mit. Wenn dieser Blog für Sie interessant ist, würde ich mich freuen, wenn Sie diesem Beitrag ein „Gefällt mir“ geben könnten (mit Ihrem Lieblings-Emoji?).

Frieden ✌

Referenzen

• Über meine Sitzung
• Sehen Sie sich meinen Vortrag hier an!
• Wie war React India für mich?

Vernetzen Sie sich mit mir auf Topmate zur Vorbereitung auf Vorstellungsgespräche

Das obige ist der detaillierte Inhalt vonDecodierung von StyleX: Metas hochmodernes Styling-System. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!