Closed9

Next.jsのCSS技術選択肢調査

noonworksnoonworks

CSSフレームワーク

  • 顧客が気に入ってくれたらそれでいいけど、気に入ってもらえなかったときに後から変えるのがしんどいと思う。（幸いそのような経験はないが……）
  • Headless UI や Adobe Spectrum のようなデザインシステム構築を補助するタイプのフレームワークならば後からでも柔軟に対応可能そう。
    • ただし、逆にデザインにコレといったこだわりがあるわけでもないので、そこまでコストをかけられないなぁ

今回は見送り。

Pure CSS

  • BEM等の命名規則で運用する。
  • 条件と規模によってはアリかも？
    • 既存のコーポレートサイトCSSがあってほぼそこから拝借するだけの小さな業務システムとか。

今回はちょっと厳しい。

noonworksnoonworks

CSS Modules

プレーンなCSSである将来的安心感と、CSS in JS のランタイムのコストがないことが魅力的（わずかなコストだろうけども、ないに越したことはない）

noonworksnoonworks

CSS in JS

  • Next.js公式にはstyled-jsxが用意されているけど、あまり名前を聞かない気がする。
  • linaria や vanilla-extract みたいにCSSを出力するZero runtimeなタイプもある。
    • もし採用するならzero runtimeがいいなあ。
    • （CSS Modulesでzero runtimeで出来てることを）わざわざruntimeでやるほどの魅力は感じない。何か特別なメリットが別にあるようなら話は変わるけども……
  • おおよそは「CSSを文字列で書く」か「JSのオブジェクト形式で書く」形式だけど、ライブラリごとに微妙に異なる記法や機能があるし、いざというときの移植性ではやはりプレーンCSSにはかなわないよなぁ。
  • これは個人的な感想：
    • プレーンCSSであることのメリット（既存資産、学習／人員調達コスト、安定性、将来性）を全て捨ててまで「コイツに賭ける」と思えるCSS in JSライブラリに出会えていない
    • この点において自分はかなり保守派だと思う
  • CSS Modulesと対比したとき、動的にCSSを構築するような場合にはCSS in JSの方が圧倒的に書きやすい。
    • ただ自分は、CSSを動的に構築すること自体にちょっと疑問がある。
    • SCSSのmixinとCSSのカスタムプロパティでできる以上のことをやるのは「スタイル」の範疇を超えてるよな～と思っている。
    • （自分はデザインの重要性が高い案件の経験があまりないので事情が違うのかも）

おまけ：tailwind

かなり人気だけど、書き方の独自性が高すぎて移植性がほぼ皆無なので、一緒に死ぬ覚悟がないと採用できない気がしている……どうなんだろう。「CSSフレームワークをかなりカスタマイズして使ってる」みたいな層向けなのかな？
CoffeeScriptのトラウマがよみがえる。アプリからtailwindをひっぺがした経験談があれば読みたい。

noonworksnoonworks

https://zenn.dev/link/comments/798e33783aa593

CSS Modulesになくてno runtime CSS in JSにある利点は、 CSS custom properties等を利用した動的な値を使うことが、（ライブラリが連携を隠蔽していることで）極めてしやすいこと

ここだよなぁ。
個人的には、動的な値をバンバン使いたいという状況はあまり浮かばないのだけれど、私の経験が少ないだけかも……？

noonworksnoonworks

今回は「CSS ModulesじゃなくてCSS in JSを選ぶ理由」が特にないので、CSS Modulesでやってみることにする。何かあったらまた追記する。

noonworksnoonworks

これは余談：
CSS in JSが世に出てすぐくらいの紹介記事には「CSS in JSはCSSよりパワフル」と書いてあるものがけっこうあるけど、それはちょっと語弊があると思っている……。CSS in JSが解決しているのは記述時の効率問題であり、表現力という点ではCSSで表現できないことはCSS in JSでも結局表現できない。というかむしろ、将来CSS自体がアップデートされて表現力が向上したときに追従できるかわからないという点で、表現力という点には不安材料があるとさえ思う。
マジ何度も言ってるけどこれはCoffee（JS記述の効率化を図ったがJS自体の進化に追従できず消えてしまった言語）のトラウマなんで許してください。

このスクラップは2022/01/06にクローズされました