CSSフレームワークに何を求めるか？

前提

現代のCSSフレームワークはデザインシステムを構築するための道具である

CSSを簡単にする道具ではない

デザインシステムを構築するとは、すなわち制約を設けること

そもそも、Vanilla CSSの機能が拡充した現代において、真に難しいのはスコープぐらいしかない

これはCSS Modulesが解決済み

現代のCSSフレームワークはコンポーネント指向を前提としている

コンポーネント: HTMLの構造とスタイルを隠蔽したセマンティックな単位

スタイルとHTMLの構造は分離できない

現代の複雑なUIでは最早この考え方は役に立たない

asa1984.icon 「じゃあ全部divにしろってことですか！？」というとそれは違う

セマンティクスとスタイルの分離で達成したい「嬉しさ」を、太古のWebではHTMLとCSSの分離という形で実現できた

asa1984.icon 嘘かも

Webアプリという概念が生まれUIが複雑化していき、それだけでは難しくなった

代わりにアクセシビリティの観点から構造化できていれば問題ないという方向性にシフトしている

「classの名前をセマンティックにしてスタイルを共通化する」は誤りであることが多い

「スタイル」と呼んでいるものの粒度が荒すぎる

デザインシステムで分離すべきレイヤーを跨いでしまっている

https://scrapbox.io/files/68582fd296535dab58c6ac8a.png

asa1984.icon セマンティックトークンより抽象度が高いレイヤーとして「ユーティリティ」があるかもしれないが、広く合意の取れた定義を見つけられなかったので一旦無視

Tailwind CSSのクラスがどの程度の抽象度で定義されているのか観察すると分かりやすい

一定の抽象度で統一されていることが分かる

何を求めるか？

最重要なのはconfigurableであること

1. デザイントークンをいい感じに定義できる

2. 設定したトークンを補完・検査できる

Tailwind は要件を満たすか？

結論: 満たす

設定すると新しいutilityを定義できるし、色やスペーシングのトークンも変更可能

適切なエディター補助機能を使えば補完も効く

asa1984.icon の意見

Tailwindは安牌だが辛い

単なる文字列にそれ以上の意味を持たせていることによる弊害がすごい

1. 動的なスタイル制御が渋い

スタイルを制御するプログラムに意味が伝わっていない

twmergeやclsxみたいなライブラリが必要になる

2. 独自のエディター補助が必須

3. 静的検査も専用のものが必要

asa1984.icon はPanda CSSを推している

ゼロランタイムCSS in JS

TypeScriptを利用して補完や検査が可能になっている

TypeScriptに乗っかれるのはデカい

しかし、やはりTailwindが育んできたエコシステムと実績が盤石なことは認めざるを得ない

asa1984.icon 新しめのWebサービスだと割と使ってるところあるのでPanda CSS頑張ってほしい！！！