Decoding StyleX: メタの最先端スタイリングシステム-CSSチュートリアル-php.cn

毎年 10 月に、インドのゴアで最大の国際反応会議が開催されます。はい、私は React India について話しています。今年（2024 年）は、この素晴らしいカンファレンスで講演する機会を得たので、私にとってさらに特別でした。ライブを見逃した方のために、私の講演の録画をここに載せておきます。動画を見るよりも読む方が好きなら、このブログはまさにあなたにぴったりです!それでは、詳しく見ていきましょう。

スタイルXとは何ですか？

StyleX は Meta の新しいスケーラブルなスタイリングライブラリで、現在 Facebook、Instagram、WhatsApp などのプラットフォームの背後にある主要システムとして使用されています。これは、CSS-in-JS アプローチ、特に大規模な React アプリケーションで経験する問題点に対処します。 StyleX は、アトミック CSS と静的 CSS の両方の最高の機能を組み合わせたハイブリッドソリューションを提供することで、効率的でモジュール式でスケーラブルな代替手段を提供します。

Meta はどのようにして、なぜ StyleX を作成したのでしょうか?

Meta は、大規模プロジェクトにおける従来の CSS-in-JS ライブラリで遭遇する特定の課題に対処するために、StyleX を構築しました。

未使用のスタイル: プロジェクトが成長するにつれて、CSS は未使用のルールを蓄積し、スタイルシートを肥大化させることがよくあります。
パフォーマンスの問題: CSS-in-JS ソリューションは、特にアプリケーションにバンドルされている場合、大きな CSS ファイルやパフォーマンスのボトルネックを引き起こす可能性があります。
CSS-in-JS ライブラリサイズ: JavaScript でのスタイル設定に使用される多くの一般的なライブラリは、バンドルに不必要な重みを追加し、読み込み時間に影響を与えます。

StyleX の紹介: Facebook UI 刷新の一環として 2019 年に作成され、2023 年 12 月にオープンソース化されました。
CSS 最適化: StyleX を使用する前は、Facebook の 1 つのページに約 15 ～ 45 MB の CSS スタイルが読み込まれていました。 StyleX では単一の CSS バンドルを利用することで、これが約 200 ～ 300 KB に大幅に削減されました。
StyleX の目的: 大規模なスタイリングの複雑さを効果的に管理するために開発されました。これは、多数の開発者が何千ものコンポーネントを作成するときに発生する、CSS 内での特異性の競合につながることが多い課題に対処します。 StyleX は、スタイリングのための構造化されたフレームワークを提供することで、スタイリングプロセスの一貫性と明確さを維持するのに役立ちます。
アトミッククラスの生成: StyleX は最初から一貫してアトミッククラスを生成し、保守性の向上とスタイルの競合の削減のためにコンポーネントごとに複数のクラス名を持つというトレードオフを受け入れます。

StyleX の主な特徴:

アトミック CSS 生成: StyleX はアトミック CSS 生成を採用しています。これは、スタイルルールごとに小さな再利用可能なクラスを作成することを意味します。このアプローチにより、最終的な CSS バンドルの冗長性が最小限に抑えられるだけでなく、スタイルシート全体のサイズが削減されてパフォーマンスも向上します。
CSS 重複排除: 各スタイルに一意のクラス識別子を生成することで、StyleX は重複したスタイルを効果的に排除します。この重複排除プロセスにより、各プロパティと値のペアが 1 回だけレンダリングされるようになり、CSS 出力のスリム化にさらに貢献します。
「最後に適用されたスタイルが常に優先されます!」: StyleX は、最後に適用されたスタイルが優先される予測可能なスタイルルールに従います。この機能により、スタイルルールの競合に関する懸念が軽減されるため、デバッグが簡素化され、開発者の信頼が高まります。
React 用に最適化: React アプリケーション専用に設計された StyleX は、React エコシステムにシームレスに統合されます。これにより、開発者はコンポーネント内で直接スタイルを定義できるようになり、より一貫した開発ワークフローが促進されます。
Flow と TypeScript のサポート: StyleX は「Flow」(Meta によって作成) で書かれており、TypeScript の強力なサポートも提供し、スタイルとテーマのタイプセーフ API を有効にします。この型安全性により、コードの信頼性と保守性が向上し、複雑なスタイル設定シナリオの管理が容易になります。
柔軟な条件付きスタイル: StyleX を使用すると、開発者はコンポーネントの状態やプロパティに基づいて条件付きでスタイルを適用できます。この柔軟性により、ユーザーの操作やアプリケーションの状態の変化に適応する動的なスタイル設定が可能になります。
スコープ付きスタイリング: StyleX のスコープ付きスタイル機能により、スタイルが目的のコンポーネントにのみ適用されます。これにより、大規模なコードベースでよく発生する、意図しない副作用や特異性の問題が防止されます。
ランタイム計算の削減: StyleX は、コンパイル時にすべてのスタイルを静的 CSS ファイルにバンドルすることで、ランタイム計算を最小限に抑えます。この最適化により、特に大規模なアプリケーションで、レンダリング時間が短縮され、パフォーマンスが向上します。
コードの保守性の向上: スタイルをそれぞれのコンポーネントと同じ場所に配置し、アトミッククラスを利用することにより、StyleX はコードの保守性を向上させます。開発者は、広範なスタイルシートを調べなくても、スタイルを簡単に理解して変更できます。
最小限の CSS 出力: アトミック CSS を使用すると、最小限の CSS 出力が得られ、パフォーマンスにとって特に有益です。プロジェクトのサイズと複雑さが増大しても、StyleX は機能を犠牲にすることなく CSS バンドルを管理しやすい状態に保ちます。
あらゆる規模のプロジェクトに適しています: StyleX はあらゆる規模のプロジェクトに適していますが、大規模なアプリケーションで真の威力を発揮します。そのアーキテクチャは、パフォーマンスや保守性を損なうことなく、広範なスタイルのニーズの複雑さを処理できるように設計されています。

それがどのように機能するか見てみましょう ?‍?

この記事のコード例は React で書かれており、主に App.jsx と Button.jsx の 2 つのコンポーネントを使用して作業します。スタイルを追加する前に、これらのコンポーネントの基本構造を見てみましょう。

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;

ログイン後にコピー

Decoding StyleX: Meta

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;

ログイン後にコピー

これらのスタイルを使用するには、styleX パッケージからスタイルをインポートし、オブジェクトをパラメータとして受け取る stylex.create メソッドを使用してスタイルを定義する必要があります。次に、stylex.props メソッドを使用して、コンポーネントにスタイルを適用できます。

この例では、base は適用するスタイルの名前です。 StyleX では、これらを 名前空間 と呼びます。現在のボタンコンポーネントは次のようになります。

Decoding StyleX: Meta

疑似クラスへのスタイルの追加

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;

ログイン後にコピー

StyleX を使用すると、疑似クラスにスタイルを追加するのが非常に簡単になります。前の例では、backgroundColor は文字列でした。ここでは、デフォルト値と疑似クラスを持つオブジェクトに変換します。

Decoding StyleX: Meta

メディアクエリの操作

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;

ログイン後にコピー

他のスタイルライブラリと比較して、StyleX で異なる方法を実行する 1 つはメディアクエリです。ここでは、要件に基づいてメディアクエリをすべての名前空間に適用します。この例では、ボタンの幅を大きな画面では 100 ピクセル、小さな画面またはモバイルデバイスでは 100% の幅に定義しています。

Decoding StyleX: Meta

「最後に適用されたスタイルが常に優先される」方法を見てみましょう。

前の例を拡張して、このボタンのさまざまなバリアントを作成する方法を見てみましょう。

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"]),
};

ログイン後にコピー

stylex.create メソッドにさらにいくつかの名前空間を追加し、異なる背景色を提供してみましょう。さらに、Button コンポーネント内で 2 つの新しいプロップを受け入れます。 isHighlighted は、強調表示された名前空間を適用するために使用するブール型プロパティです。そして、variant は、プライマリ、危険、または強調表示された名前空間を適用するために使用する小道具です。

// 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;

ログイン後にコピー

渡されるさまざまなプロパティを使用して、Button コンポーネントのコピーをさらにいくつか作成します。現在のアプリは次のようになります。

Decoding StyleX: Meta

それでは、「危険ボタン」を詳しく見てみましょう。 isHighlighted を true として渡しても、強調表示された名前空間は適用されません。危険性のバリアントは最後に記載されているため、適用されます。したがって、ボタンの背景色は赤色になります。

親からのスタイルをオーバーライドする

この Button コンポーネントのスタイルプロパティを App.jsx から直接オーバーライドできます。

import Button from "./components/Button";

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

export default App;

ログイン後にコピー

Decoding StyleX: Meta

この例では、オーバーライド名前空間は現在、任意のプロパティを許可しています。ただし、StyleX では、オーバーライドできるプロパティを制限する機能が提供されます。この機能は、TypeScript を使用する場合に特に役立ちます。

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

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

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

export default Button;

ログイン後にコピー

この制限により、backgroundColor と color プロパティのみをオーバーライドできることが保証されます。

アトミッククラスはどのように機能するか (内部)

Decoding StyleX: Meta

前のコード例まで上にスクロールすると、margin: "1rem" スタイルが 3 つの異なる名前空間 (App.jsx の main、button.jsx の強調表示、primary) に追加されていることがわかります。 Devtools を使用して要素を検査すると、さまざまなコンポーネント (メインコンテナ、強調表示されたボタン、主ボタン) が同じクラス名で接続されており、マージン: "1rem" スタイルを保持するクラス x42y017 が 1 つだけ存在することがわかります。 🎜>

このようにして、StyleX はアトミッククラスを採用することでバンドルサイズを大幅に削減しました。特定のしきい値に達すると、新しいクラスは生成されません。代わりに、単に既存のクラスを再利用します。

グローバル変数とテーマ

細かいレベルでスタイルをオーバーライドできるのは素晴らしいことです。ただし、特定のデザインシステムはデザイントークンとテーマをサポートする必要があります。そこで、StyleX が登場します。StyleX のテーマ API の設計は、React の Context API から直接インスピレーションを受けています。変数は React コンテキストの作成方法と同様のデフォルト値で定義され、UI サブツリーのこれらの変数に異なる値を「提供」するテーマを作成できます。

x.stylex.js ファイルを作成することで、グローバルスタイルを作成できます。この命名規則に従ってください。このファイルでは、以下に示すように stylex.defineVars を使用します。

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;

ログイン後にコピー

ユーザーの好みのテーマを参照し、それを定数値 (DARK) に設定します。さらに、この色変数を使用して新しいテーマを作成しましょう。

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;

ログイン後にコピー

テーマを作成したら、StyleX の他のスタイルと同じように使用できます。

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;

ログイン後にコピー

これにより、myCustomTheme を使用して同じページをライトモードとダークモードでそれぞれ表示できるようになります。

Decoding StyleX: Meta

それはラップですか？

万歳！ StyleX の使い方の要点を理解することに成功しました。最後までお読みいただきありがとうございます。 StyleX とは何か、Meta がそれをどのように作成したのか、そしてその使用方法についてよく理解できたでしょうか。ご意見やご質問は、コメント欄または Twitter で共有してください。このブログに興味を持っていただけましたら、この投稿に「いいね！」（お気に入りの絵文字を添えて？）していただければ幸いです。

平和 ✌