CSS in JS調査
歴史
CSS設計、BEM
CSS in JS
utility first
tailwind系
現状のメジャーライブラリ
vercel製
styled-componentsの方がシェアある気がするが、Next.js使ってるとデフォルトでこっちがついてきたりする
まだ良く調べてない
styled-components
@emotion/css
フレームワークに依存しない。classNameを返すから
styleタグを追加しつつ、対応するuniqueなclassNameを返す
@emotion/react
css prop使える
逆に言うと、jsxをいじることになるので、jsx pragmaかbabelをかませる
そこまでするなら、className返すだけのやつで良くない？という気もする
いや、でもどうなんだろ、classnames的な役割も担えるなら一理あるが
@emoton/styled
styled-componentsの書き方
utility first
react,vueのコンポーネントも使うことを推奨してる
便利class name集とも言えるが、使ってるclass名だけ生成するとかそういうこともやってる
共通のテーマ、サイズ、メディアクエリのbreakpointなど、設定でいじったり
使用してるものだけ生成
htmlやjs, vueファイルを探索して、使っているクラスのみを出力する
これは、他のCSS in JS系とは微妙に相性が悪い
共存はできるが、tailwindで使っている色をJS側で使うのがむずい
このように、良い点が複数の観点であり、議論がしっちゃかめっちゃかになりがちなので、こういう把握が大事
批判
関心の分離という言葉に踊らされている
以下のような前提なら主張も理解できる
htmlを与えられて、cssを書く
メンテナンスをしない
書いて終わり
他人が間違ったCSSを書く心配がない（少人数で、全体のコードを全員が脳内によく記憶している）
割れ窓の心配がない
でも現代はコンポーネント単位で作るのが主
jsでコンポーネントをまとめて、動的に出し分ける
tailwindcssなapiをもったreact component
内部的にはemotion使ってるし、install時に自分で一緒に入れる必要がある
twind
軽量tailwindって感じ
>The smallest, fastest, most feature complete Tailwind-in-JS solution in existence
tailwind-in-JS
tailwindのいいところをcss-in-jssにねじ込むやつ
twin.macro
なんか識者が不安がってるツイートを見るな
>twin.macroって、Tailwind CSSの利点のうち「Cascadeしない」と「Tailwind特有のクラス名が使える」以外消し飛んでいる気がするんだけどいいのかな（？）
>twin.macro も型安全の先行例として挙げてもいいのかもしれませんが、流石に設計がやんちゃすぎてスルーしました。なので twin.macro については詳しくありません。
macroでむりやりねじ込む感じなのだとしたら、
tailwindが用意してる他のエコシステムが効かなくなる、それはそうよな
xwind
現状のの判断
tailwind
長いものにまかれたい
小さく収めたい(とにかくclass書くだけ)
CSS in JSをしっかりやりたいなら、emotion
しっかりって何？
既存のプロジェクトでなんかどれか使ってるなら、
必要なら置き換える
必要ないならそのまま使ってるやつ使う
タイミングだけを意識しておく
どこで置き換える必要が出てくるか
置き換え先の選定
と思ってたけど、twindが良い気がしてきた
でもキモいところもあるな…
TS書いてて、便利コンポーネントもさくさく使いたいならChakra UI
ただし、将来的に剥がしにくくなりそうな気もする
補助
classnames, clsx
公式でも、classNameを文字列として動的に操作したりするなら、こういうライブラリ使うと良いよと言っている
観点
型補完、リンター
使えるプロパティ
パフォーマンス
事前ビルド or ランタイムの動作
スタイルと機能を持ったコンポーネントの区別
好み
便利コンポーネント
その密結合かモジュラーか
密でいいからバシバシ使いたいならChakra UI
ちゃんと分けたいならHeadless UIとか
CSS in JSの記法
Object style
string style
(s)cssと同じなので、こっちになれてる人はこっちが楽
既存のCSSから置き換えるようなケースでも、こっちが楽だろう
型の恩恵は？
tailwindcss-classnames
>2 点目は静的解析がしやすいという点です。CSS Modules や styled-jsx では、通常の CSS と同様にセレクタを記述して className にクラス名を書いていくことになります。これらの手法の問題点は、クラス名を間違っていたとしても実行するまで気づくことができないこと、未使用のスタイルを静的解析により検出することができないことです
これってstyled-jsx/cssで大丈夫じゃね？
まあでもcss.resolveでclassNameとりつつ、styleをchildrenに入れるのだるいし、も選ぶならemotion使うが