SYM's Tech Knowledge Index & Creation Records

My技術ナレッジ記録＆クリエィティブ活動記@生涯モノ創り IT Engineer.

React スタイリング メモ

React

React スタイリング メモ

React スタイリング 手段

手法は大きく２つに分かれていそう

  • CSS Modules系：

    • CSS を分けて書く。（規約が定まる）
    • CSSのロードはJSと分かれるため、パフォーマンスは良い傾向（ビルド時に作成されたCSSファイルをロードする方がパフォーマンスがよいケースは多い）
    • CSS用のファイル分けるため、ファイルが増える/メンテしずらい等、開発者体験は悪くなる傾向

  • CSS-in-JS系：

    • jsx/tsx に CSS も一緒に書く。CSSをコンポーネントレベル自体に抽象化できる。
    • jsからスタイルを動的生成するため、物や規模によっては部分的にパフォーマンスの問題が出てくる？（例：styled componentの初期ロードが重くなる可能性）
    • 1ファイル内で完結し、強いメリットもあるため、開発者体験は良い傾向。ただし、ロジック側との境界が曖昧になるし、難しい面もあるみたいなので、失敗すると大変なことになる

ダイナミックスタイルが必要になるなら、CSS-in-JS。ただしCSS-in-JSはライブラリ等への依存度高い上、CSSをそのまま移植はできない。CSS Modulesで書くCSSは標準技術であり、CSSだけは結合度を低くできるから移植もしやすい。安定を取るならCSS Modules。

手段

  • CSS Modules
    • パフォーマンスが良いが、1コンポーネントに1cssファイル必要→ファイルが膨大になり開発しづらくなる（css-loaderが非推奨）

  • Vanilla-Extract (CSS Modules)

  • Styled Component (CSS-in-JS)

  • emotion (CSS-in-JS)：メリットやデメリットはstyled-componentsとほぼ一緒

  • Tailwind CSS (CSS フレームワーク)：

    • ユーティリティファーストのCSSフレームワークで非常にReactと相性がいい。
    • CSS Modulesにも@applyで組み合わせたり、CSS-in-JSにもtwin.macroというライブラリで組み合わせて使う事も可能で、汎用性が高い
    • ただし、複雑なスタイルはclassにたくさん書く必要が出てくるため分かりにくくなる（可読性が悪くなる）

  • Material UI (UI ライブラリ)

    • マテリアルデザインを簡単に実現することができるデザインライブラリ（故にデザインがマテリアルデザイン固定になる）
    • ver5 から カスタマイズ性能を持ち合わせた
    • emotion か styled-components を使用するようになった（＝CSS-in-JSの特徴に当てはまる?）

  • Chakra UI (UI ライブラリ)

非推奨：

  • styleプロップ：パフォーマンスが悪い

ref