[LogRocketのブログ](https://blog.logrocket.com/writing-composable-css-components-react/)で、ReactとCSSを組み合わせるための新たな選択肢 「CSS Components」に関する解説記事が公開されています。

本稿では、日本のエンジニア向けに記事を要約して紹介します。詳しくは原文を参照してください。

CSS Componentsは、ReactコンポーネントにCSSクラスの組み合わせを行うための小型（2.3Kb）なモダンユーティリティです。このユーティリティは、開発者エクスペリエンス（DX）を重視し、React 18のリリース以降、サーバーコンポーネントがReactアプリの作成において主流となっていますが、CSS-in-JSを使用する際のDXの課題に対処することを目指しています。

主な特徴とAPI

CSS Componentsは、ReactコンポーネントにCSSスタイルを組み合わせるための便利なユーティリティであり、以下のような特徴があります。

styled APIを使用したコンポーネントの定義

CSS Componentsでは、styled APIを使用してコンポーネントを定義します。これにより、再利用可能なユーティリティコンポーネントを簡単に作成することができます。

import { styled } from "@phntms/css-components";

const Button = styled("button", {
  css: "rootStyles",
  variants: {
    // バリエーションの定義
  },
});

variantsオプションによるスタイルのバリエーション

ユーティリティコンポーネントの作成は、variantsオプションを使用して異なるスタイルのバリエーションを定義することで行われます。これにより、ボタンのようなコンポーネントに様々なスタイルの変数を持たせることができます。

const Button = styled("button", {
  variants: {
    primary: {},
    secondary: {},
    // 他のバリエーションの定義
  },
});

スタイルの再利用性の向上

重複するスタイルを抽出して効率的に管理する方法も提供されています。btnクラスのようなスタイルの再利用可能なユーティリティクラスを定義することで、コードの保守性を向上させることができます。

/* btnクラスの定義 */
.btn {
  padding: 0.5rem 1rem 0.5rem 1rem;
  border-radius: 0.2rem;
  cursor: pointer;
  border: none;
  color: white;
}

/* primaryバリエーションの定義 */
.primary {
  background-color: white;
  color: black;
}

ベースコンポーネントを使用したスタイルの継承

CSS Componentsは、既存のコンポーネントをベースにしてスタイルを継承して新しいコンポーネントを作成することも可能です。styled APIを使用してベースとなるコンポーネントと新しいコンポーネントを組み合わせることで、既存のスタイルを再利用しながらカスタマイズしたコンポーネントを作成できます。

const BaseButton = styled("button", {
  css: buttonStyles.btn,
});

const SubscriptionButton = styled(BaseButton, {
  css: subscriptionStyles.btn,
});

パフォーマンス比較

CSS Componentsは、popular CSS-in-JS libraries such as styled-componentsやStitchesなどの他のCSS-in-JSライブラリと比較しても高いパフォーマンスを発揮しています。特に初期スタイルのインジェクションやCSSプロップの更新において優れた性能を示しています。また、複雑なDOMノードのツリーにおいても高いパフォーマンスを維持しており、大規模なアプリケーションにおいても効果的に利用できます。

まとめ

CSS Componentsは、ReactコンポーネントにCSSスタイルを組み合わせるための便利なユーティリティであり、開発者エクスペリエンス（DX）を重視しています。React 18のリリース以降、サーバーコンポーネントの普及が進む中、CSS Componentsのようなユーティリティを活用することで、より柔軟でメンテナブルなスタイル管理が可能となります。カスタムなユーティリティコンポーネントを作成し、スタイルのバリエーションを効率的に管理することで、ReactアプリケーションのスタイリングにおいてCSS Componentsの活用が推奨されます。

このユーティリティのソースコードや、他のCSS-in-JSライブラリとのパフォーマンス比較などの詳細情報は、GitHubリポジトリで確認することができます。

詳細はLogrocketのブログ「Writing composable CSS components for React」を参照してください。