Closed18
調査：UIライブラリとStyleツールを検討する
ピン留めされたアイテム
TK結論
MUI + CSS Module
- バックオフィス用のシステムの為、デザインのカスタマイズがあまり必要ない
- Multiple Selectが要件に入っていたので、Chakra UIとの比較でMUIのが必要なコンポーネントが揃っていた
- 依存パッケージでEmotionをインストールすることになるが、パフォーマンス対策としてなるべくCSS Moduleで通常のスタイリングはする
TK背景
Vite x React x TSのアプリケーションを新規に構築しており、コンポーネントライブラリとCSSライブラリの導入を検討中。
"react": "^18.2.0",
"typescript": "^4.6.4",
"vite": "^3.0.0"
バックオフィス用のアプリケーションとなる為、スタイルのカスタマイズ性はあまり重要ではないが、Headlessのライブラリも含め検討する。
選定ポイント
- TypeScript
- Bundle size
- React 18対応
- Vite対応
- a11y
- メンテナンス体制
- カスタマイズ性（バックオフィス用のアプリのため、そこまで重要ではない）
- ポータビリティ（乗り換えやすさ）
TKCSS Library
- tailwind
- styled-components
- emotion
- stitches
- vanilla-extract
- CSS modules
- linaria
TKStitches
- TypeScript で型安全に書ける
- near zero runtime で速い
TKNPM Trends
style-components, emotion, tailwindがやっぱりダウンロード数多い。
stitches, vanilla-extract, linariaはどっこい。
TKThe State of CSS 2021
- vanilla extractとCSS in Moduleの人気が高い
https://2021.stateofcss.com/en-US/
TKVite x CSS module
.module.css で終わる全ての CSS ファイルは全て CSS modules file とみなされる。
TKStyleをコンポーネントと同一ファイルに書くか
書かない
- CSS Modules
- vanilla extract
書く
- styled-components
- emotion
- linaria
TK
CSS moduleの問題点
- クラス名を間違っていたとしても実行するまで気づくことができない
- 未使用のスタイルを静的解析により検出することができない
- 一方CSS in JSは、ESLint や TypeScript コンパイラといった JavaScript 向けの静的解析ツールにより、未使用の CSS を簡単に検出できる
TK候補
- MUI + emotion
- Radix + CSS Module
- Radix + stitches(vite対応しているか不明）
MUI
- カスタマイズ性があまり必要のないバックオフィスのアプリケーションなので、コンポーネント数が多く、時間をかけることなく実装を進められそうなのは良い。
- 依存パッケージがemotion（変更可）なので、CSSフレームワークはMUIの場合emotionとなる
Radix
- Headlessでコンポーネントの数もそこそこあるのは魅力的
- まだversionが0始まりなのはちょっと気になる
このスクラップは2022/07/23にクローズされました