仕事での最近の UI 開(kāi)発タスクは、CSS-in-JS とユーティリティファースト CSS (Tailwind) を再検討する貴重な機(jī)會(huì)となりました。 私の日常の役割には UI 作業(yè)が含まれることはほとんどないので、これは、少し錆びついたとしても、新鮮な経験でした。 ここでの私の目的は、開(kāi)発ワークフローとツールに焦點(diǎn)を當(dāng)てて、両方のアプローチを公平に比較??することです。

Tailwind CSS

私たちのチームが Tailwind を選択したのは、効率性への欲求に駆られて、いくぶん自発的なものでした。 親しみやすさには個(gè)人差があり、懐疑的な見(jiàn)方もありましたが、時(shí)間の節(jié)約は説得力のある要素でした。

ポジティブな側(cè)面

統(tǒng)合、カスタム変數(shù)の作成、テーマの開(kāi)発は非常に簡(jiǎn)単でした。 新しいテーマの拡張または構(gòu)築は直感的に実行できることが判明しました:

<code>@import "tailwindcss";
@theme {  
  --font-script: Comic-sans; // theme extension
  --color-*: initial;  // default overrides
  --color-white: #fff;
  ...
}</code>

基本スタイルを含めることで、デフォルトのマージンやパディングの削除などの単純なものであっても、時(shí)間を大幅に節(jié)約できました。 これにより、ワークフローが大幅に合理化されました。

Tailwind は直感的なエクスペリエンスを目指しており、それはほぼ達(dá)成されています。 ただし、いくつかの側(cè)面は直感的ではないと感じます。クラスの命名規(guī)則は一般に明確ですが (例: パディングの場(chǎng)合は p、マージンボトムの場(chǎng)合は mb)、場(chǎng)合によっては不一致が発生します (例: rounded の場(chǎng)合は border-radius)。 これはカスタム テーマ定義で軽減できます:

<code>@theme { 
  --border-radius: var(--rounded);
  --border-radius-none: var(--rounded-none);
  --border-radius-full: var(--rounded-full);
  // ...etc.
  --rounded*: initial;
}</code>

全體的な感想

可読性と保守性は予想よりも問(wèn)題がありませんでした。 構(gòu)文には調(diào)整期間が必要で、VS Code の IntelliSense は時(shí)折遅延しましたが、小さな要素に複數(shù)のクラスが適用されている場(chǎng)合でも、コードは管理しやすく、ナビゲートしやすいままでした。

重要な注意事項(xiàng): @apply に過(guò)度に依存しないでください。 これにより、「CSS の追い風(fēng)」という望ましくない結(jié)果が生じる可能性があります。

サーバーサイド レンダリング (SSR)

重要なのは、Tailwind ではテスト中に SSR の問(wèn)題が発生しませんでした。 シームレスな統(tǒng)合は大きな利點(diǎn)でした。

JS 內(nèi)の CSS (感情)

2024 年から 2025 年にかけて、CSS-in-JS ソリューションの人気は低下します。これは主に React などのフレームワークでのサーバー コンポーネントの臺(tái)頭が原因です。

參照: http://www.miracleart.cn/link/9cb4d40fce0492278209290ee3e4ae31

主要な課題

大きな問(wèn)題は、React の Context API への依存に起因しています。 React アプリケーションでサーバー コンポーネントとクライアント コンポーネントを混在させると、データ損失が発生し、再レンダリング時(shí)に正しいスタイルが更新されなくなる可能性があります。 この制限は、多くの CSS-in-JS ライブラリに固有のものです。

互換性のある代替手段は存在しますが、根本的な問(wèn)題は依然として殘っています。 Joshua Comeau のブログは、この問(wèn)題に関する優(yōu)れたコンテキストを提供します。

回顧

今にして思えば、CSS-in-JS への移行は當(dāng)初予想していたほど有益ではないと感じました。 含まれた開(kāi)発エクスペリエンス (すべてが 1 つのファイル內(nèi)にある) は最初は魅力的でしたが、時(shí)間が経つにつれて、この利點(diǎn)は重要ではなくなることがわかりました。

長(zhǎng)期的な考慮事項(xiàng)

CSS-in-JS では、入力と設(shè)定のオーバーヘッドが増加しました。 Tailwind と比較すると、効率が低く感じられました。 條件付きプロップの受け渡しはパワーと柔軟性を提供します:

<code>@import "tailwindcss";
@theme {  
  --font-script: Comic-sans; // theme extension
  --color-*: initial;  // default overrides
  --color-white: #fff;
  ...
}</code>

これにより、コードの理解とリファクタリングが複雑になる可能性もあります。 過(guò)剰なスタイルの上書(shū)きは、デザイン システムの不整合の可能性を示します:

<code>@theme { 
  --border-radius: var(--rounded);
  --border-radius-none: var(--rounded-none);
  --border-radius-full: var(--rounded-full);
  // ...etc.
  --rounded*: initial;
}</code>

新しいプロジェクトの場(chǎng)合は、CSS-in-JS は避けるでしょう。

CSS 変數(shù)とテーマ

CSS 変數(shù)は非常に貴重です。 パレットを一度定義してコンポーネント間で再利用すると、スタイル設(shè)定が簡(jiǎn)素化され、事前定義されたコンポーネント バリアントを使用する場(chǎng)合と同様のエクスペリエンスが提供されます。

<code>const Button = styled.button`
  background: ${props => props.variant === 'primary' ? "#ddd" : "#fff"};
`;

render(
  <div>
    <Button variant="primary">Primary</Button>
  </div>
);</code>

ポストプロセッサーと構(gòu)成

ポストプロセッサ (PostCSS など) は CSS の最適化に不可欠です。 これらは大きな利點(diǎn)をもたらします:

• cssnano: 未使用のコードを削除します。
• postcss-nested: Sass と同様のネストされた CSS を有効にします。
• stylelint: lint 機(jī)能を提供します。
• autoprefixer: ベンダー プレフィックスを追加します (ただし、現(xiàn)在はそれほど重要ではありません)。
• postcss-import: @import ステートメントを有効にします。

(完全なリスト: http://www.miracleart.cn/link/2d280461b029134123f1f1a356e176b1)

ポストプロセッサーはオーバーヘッドを追加しながら、開(kāi)発者のエクスペリエンスと CSS のパフォーマンスを向上させます。 多くの場(chǎng)合、初期投資を上回るメリットが得られます。

ライトニング CSS

Lightning CSS (PostCSS の Rust ベースの代替品) は、より高速なビルド時(shí)間と多くの同じ機(jī)能を提供します。 適切に統(tǒng)合されたソリューションを求める場(chǎng)合は、検討してみる価値があります。

概要

CSS の狀況は急速に進(jìn)化しており、新しいツールやアプローチが常に登場(chǎng)しています。 Tailwind と CSS-in-JS に関する私の経験は有益であり、それらの長(zhǎng)所と短所の両方を浮き彫りにしました。 RSC が將來(lái)の CSS ツールに與える影響は大きく、さらなる検討が必要です。

以上がCSS-in-JSおよびユーティリティファーストCSS（Tailwind）に関する考えの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。