elurra.tokyo

CSS, ウェブ, デザイン, 技術

React で CSS


（2023/04/10 公開？の動画）

メモ：

大まかな方法の分類

  • CSS / Sass / CSSinJS / CSS Modules
    • 直接扱う
      • 柔軟性
  • Tailwind CSS / Windi CSS
    • ユーティリティファースト
      • 賛否両論
      • 一貫性が出しやすい
      • classが長くなる
      • 文書構造と装飾の役割分担がぐちゃぐちゃ、class にぶちこまれている
        • 共通化したくなる
          • マルチカーソルを使え（公式ドキュメントに書いてある）
          • コンポーネントとして抽出
          • 名前を付けて共通化したくなる
            • 付ける必要がないけど付けなくてはいけない世界に入り込んでしまう　⇒ utility class？
              • 命名に体力を使ってしまうから
          • 見た目を整えるために共通化しないでください
  • Bootstrap
    • CSSフレームワーク
      • 見た目＋振る舞い
      • class名に機能を含んでいる
      • 使っていない装飾が多くてファイルサイズが大きくなる（Tailwind は賢い）
  • Chakra UI / Mantine UI / MUI
    • コンポーネントライブラリ
      • 見た目＋振る舞い
      • モダンなつくり（？）
      • コンポーネントとして用意されている（欠点でもある）
      • Vue.js / React.js のバージョンアップの依存の運用が大変
        • 互換性関連の書き直しが大変

結論は Tailwind CSS？
ライブラリ依存は少なくしたい？
生き残るライブラリの見極めが不明
捨てやすさ大事
Tailwind は生じゃないにしても一貫性が保ちやすい、無駄がない（使っていない style がない）
デザインシステムのメンテコスト
正解はまだ分からない
Tailwind CSS は捨てやすいかも？