style9：ビルドタイムCSS-in-js-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

style9：ビルドタイムCSS-in-js

尊渡假赌尊渡假赌尊渡假赌

Apr 03, 2025 am 09:28 AM

style9：ビルドタイムCSS-in-js

Facebookは昨年4月に大規模な改訂をリリースしました。これは野心的なプロジェクトであり、多数のユーザーがいる巨大なウェブサイトの再構築です。これを達成するために、彼らは、React、GraphQL、リレー、Stylexと呼ばれる新しいCSS-in-JSライブラリなど、独自に作成したいくつかのテクノロジーを使用して使用しました。

この新しいライブラリはFacebookが社内で使用していますが、Style9のオープンソースを実装するのに十分な情報を共有しました。

なぜ別のCIJライブラリが必要なのですか？

すでに多数のCSS-in-JS（CIJ）ライブラリがあるため、別のライブラリが必要な理由は明確ではないかもしれません。 Christopher Chedeauが説明するように、Style9は、スコープセレクター、デッドコードの除去、決定論的解析、CSSとJavaScriptの間で値を共有する能力など、他のすべてのCIJソリューションと同じ利点を持っています。

ただし、Style9をユニークにするいくつかの側面があります。

最小ランタイム

スタイルはJavaScriptで定義されていますが、コンパイラによって通常のCSSファイルに抽出されます。これは、最終的なJavaScriptファイルにスタイルが含まれないことを意味します。残っているのは、最終的なクラス名だけです。通常のように、最小のランタイムが条件付きで適用されます。これにより、コードパッケージが小さくなり、メモリの使用量が減少し、レンダリングが速くなります。

コンパイル時に値は抽出されるため、真に動的な値を使用することはできません。幸いなことに、これらの値は一般的ではなく、一意であるため、インラインの定義の影響を受けません。より一般的なのは、条件付きでスタイルの適用です。これはもちろんサポートされています。 Babelのパスのおかげで、率直に言って、ローカル定数と数学的表現もサポートされています。

原子出力

Style9の仕組みにより、各プロパティ宣言は単一のプロパティを持つ別のクラスになる可能性があります。たとえば、コードの複数の場所で不透明度：0を使用する場合、生成されたCSSには1回しか存在しません。これの利点は、CSSファイルのサイズが宣言の総数ではなく、一意の宣言の数とともに増加することです。ほとんどのプロパティは複数回使用されるため、これによりCSSファイルが大幅に減少する可能性があります。たとえば、Facebookの古いホームページでは、413 kbのGZIP圧縮CSSを使用しました。改訂後、すべてのページのCSSサイズは74 kbです。同様に、ファイルサイズが小さくなるとパフォーマンスが向上します。

生成されたクラス名はセマンティックではなく、不透明であり、カスケードを無視していると考えて、これについて不平を言う人もいるかもしれません。これは本当です。 CSSはコンピレーションターゲットと見なします。しかし、正当な理由があります。以前に最もよく考えられていたプラクティスに疑問を投げかけることで、ユーザーと開発者の両方のエクスペリエンスを向上させることができます。

さらに、Style9には、タイプスクリプトを備えたタイプスタイル、未使用スタイルの排除、JavaScript変数の使用機能、メディアクエリ、擬似選択、キーフレームのサポートなど、他の多くの強力な機能があります。

それを使用する方法

まず、いつものようにインストールしてください。

 <code>npm install style9</code>

Style9には、Rollup、Webpack、Gatsby、およびNext.js用のプラグインがあり、すべてBabelプラグインに基づいています。それらの使用方法に関する指示は、リポジトリにあります。ここでは、WebPackプラグインを使用します。

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

スタイルを定義します

スタイルを作成するための構文は、他のライブラリと非常に似ています。最初にstyle9を呼び出します。スタイルオブジェクトを使用して作成します。

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

すべての宣言は原子クラスを生成するため、Flex：1やBackground：Blueのような略語は複数の特性を設定するため機能しません。パディング、マージン、オーバーフローなど、拡張できるプロパティは、自動的にフルフォームに変換されます。 TypeScriptを使用すると、サポートされていないプロパティを使用するとエラーが表示されます。

分析スタイル

クラス名を生成するには、style9.createで返された関数を呼び出すことができます。パラメーターとして使用するスタイルキーを受け入れます。

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

関数は次のように機能します。右側のスタイルが優先され、Object.Assignのように、左側のスタイルとマージされます。以下は、12pxで満たされた要素を生成し、テキストはRebeccapurpleです。

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

次の形式のいずれかを使用して、スタイルを条件付きで適用できます。

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

これらの関数呼び出しは、編集中に削除され、直接文字列の連結に置き換えられます。上記のコードの最初の行は、「C1R9F2E5」ハスパディングのようなものに置き換えられますか？ 'cu2kwdz'： ''。ランタイムコードは残っていません。

コンビネーションスタイル

スタイルオブジェクトをプロパティ名でスタイルオブジェクトにアクセスし、style9に渡すことにより、スタイルオブジェクトを拡張できます。

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

関数呼び出しと同じように、右側のスタイルが優先されます。ただし、この場合、クラス名を静的に解析することはできません。代わりに、プロパティ値はクラスに置き換えられ、実行時に接続されます。プロパティは、以前と同様にCSSファイルに追加されます。

要約します

CSS-in-JSの利点は本物です。つまり、スタイルをコードに埋め込むと、パフォーマンスコストがあります。ビルド時に値を抽出することにより、同時に両方の世界の最高のものを達成することができます。タグをまとめてスタイルを入れたり、既存のJavaScriptインフラストラクチャを使用したり、最高のスタイルシートを生成したりすることで利益を得ることができます。

Style9が楽しい場合は、リポジトリをチェックして試してみてください。ご質問がある場合は、お気軽に質問するか、お問い合わせください。

謝辞

スタイルシートとDSSでの作業についてジュゼッペグルゴーネ、ニコラスギャラガー、リアンネイティブウェブ、サティヤジットサフー、およびコールスタックのすべてのメンバーがリナリア、クリストファーチェドー、セバスチャンマッケンジー、フランクヤン、アシュリーワトキンス、ナマンゲール、フェイスブックでのシェアでのシェアでのシェアでのシェアでの作業のために、コールスタックのすべてのメンバーに感謝します。そして、私が逃した他の人々。