CSS ソリューション pros/cons の pros だけを集める回
TakepepeCSS in JS や ユーティリティファーストな CSS など「FWは決めたものの、CSS周りは選択肢が多く決めきれない、迷う。」という方が多い様に思います。そこで、各視点を募り、参考になる様なスクラップを目指したいです。「良いところ = pros」だけを広く公募しますので、良いところをどんどん投稿してもらえると嬉しいです。
TakepepeCSS Modules の良いところは、分業観点。scss を書き慣れたデザイナーさんも、実装に参加しやすい点があると思います。
catnoseCSS Modulesを使うとコンポーネントファイルがスッキリしますね。新しく入ったプロジェクト等で「とりあえずアプリがどんな設計になっているか見てみよう」というようなときにノイズが無くて見やすいです。
好みは分かれるとは思いますが。
TakepepeCSS in JS は TypeScript でコンパイルエラーが得られますね。tsx で使いたいモチベーションとして大きいです。
Takepepe筆者が Tailwind の良いと思うところ。そんなに素振り出来てないので自信ありませんが…
- 指定できるプロパティ値が制限されるため、微妙に1pxだけ違う、という指定が生まれない（デザインがブレている指摘が出来る）デザインシステム構築のモチベーションが高そう。
- ユーティリティに集約されるため、オーバーヘッドが生まれない（スタイル側の重複指定が発生しない）デプロイされる CSS量は常に最小
AntiSatoriTailwind CSSはcssの持っている様々な問題を同時に解決していますが、その中でも１番のメリットは実装スピードが速くなることだと思います。
-
クラス名を考えて作る必要が無くなる
新しくスタイルを付ける度に新しいクラス名を考える必要がありません。命名規則やcss設計について頭を悩ませる必要がなくなります。 -
記述量が少なくなる
別ファイルのcssとhtmlをにらめっこしながらセレクタを書く必要がなくなりますし、Css in Jsに比べてもクラスを指定するだけのTailwind CSSの記述量は圧倒的に少ないです。 -
解読コストが少なくなる
これはbootstrapやbulmaなどの他のcssフレームワークと比べた話ですが、Tailwind CSSは1クラス1プロパティで余計なpaddingなどのスタイルが付かないのでhtmlのクラスを見ればどんなスタイルが当てられているか一目で分かるのが快適です。
上記の理由から実装スピードの速さとメンテナンス性の高さが両立してるのがTailwind CSSの良さだと思います。
catnose小規模なアプリであれば、何の工夫もなく1つのcssファイルをグローバルに読み込むというのも一つの選択肢だと思います。BEMに則って書けば衝突は避けられそうですし（良くも悪くも）クラスの使いまわしは楽です。場合によってはブラウザキャッシュが効くことによるパフォーマンス上のメリットもあると思います。
見通しを良くしたければ_reset.scssや_typography.scssなどにファイルを分けてindex.scssから読み込むところからはじめると…。