ReactでCSS書くならどれ使う？
Вставка
- Опубліковано 14 жов 2024
- 最近Reactでアプリを作ることが多いんですが、CSSの書き方が沢山あって迷う…！という感じだったので、各選択肢のメリデメや、僕たちが今好んで使っている書き方の紹介をします。流行廃りが速いフロント周りですが、最近は少しずつ方向性が決まってきている感があります。
🗝 キーワード
CSS / CSS in JS / CSS Modules / Tailwind CSS / Bootstrap / Chakra UI
🦜 Twitter フォローお願いします！
公式アカウント / moozaru_ch
ほぼ毎日 Web プログラミングや Web 制作・デザインに関する Tips をお届けしています。フォローしてくれれば役に立つはず 🥴
むー / moobugs
zaru / zaru
👨💻 ムーザルについて
ムーザルは、むーとzaru（ざる）の現役プログラマな二人のコンビです。
技術や物作りが好きで、楽しんで開発ができるような動画を投稿しています。
チャンネル登録やグッドボタンで応援してくれると嬉しいです。
「この技術の解説動画が見たい！」などのリクエストコメントもお待ちしております！
このデザインに合わせて作ってください、というパターンと、プログラマーがデザインできる場合で使う方法は変わりますね。
セマンティックウェブが言われていた時代は機能名をclassにつけるというルール（注意を促すからattentionとつける）になっていましたが、今はそんな面倒なことやってられねーで、bootstrapやtailwindみたいにデザイン名をclassにつける（赤いボタンだからredとつける）と言うルールが一般化していると思います。
プログラミング勉強中です。全体の整理もわかりやすく、更にご意見も非常に勉強になりました！ありがとうございます。
こういった対談は凄く為になる。ありがとうございます。
React初心者ですが、最初の疑問でまさにCSS何で書くか...とても参考になりました。Tailwind CSSは何か革新的な予感するものの、見た目が良くないなってまさに思ってました。
前はEmotion採用して書いてたりしてましたが、最近はTailwind一択ですねー。
4年くらい前かな。ある会社の、プロジェクト横断で利用できる標準CSSライブラリを作る...という野望にチャレンジした経験があります。さまざまなCSSフレームワークを評価した末に、CSSクラスの「意味」と「表現」は分ちがたく結合するのであって、分離することはできない、という結論に達しました。TailwindCSSは不恰好だと思いつつ、あれが回答だよな、と感じましたね。
tailwindの悩み、共感できます
面白かったです。RSCの流れだとjavascriptの依存が多いようなComponent Libraryは難しくなってくる気もします。shadcn/uiみたいな方向性とか、思い切ってtailwind uiのライセンス購入するとかどうなんですかね。
Tailwind UIライセンスを購入して使ってます。ただ、ぶっちゃけHeadless UIに依存しているのでガチ使いし始めると似たような状況にはなりますねー。楽は楽ですが、コンポーネントが充実しているわけじゃないので、そこまで気軽にお薦めはできないかなと思ってます。
tailwind cssでradix uiとcvaを組み合わせてデザインシステム構築するのオヌヌメ。
自分もネーミングセンス無いので、大体失敗してるんですが、
命名にchatGPT使うのコスト掛からず結構良い感じに付けてくれてる気がするんですが、エンジニア的には微妙な名前だなぁってなったりするんでしょうか？
1年経った今だと vanilla extract なんかも選択肢になるかと思います
わかりすぎてびっくりした
panda.css一択ですねぇ
Sass 使えば一回デザインすれば再利用性は出るよね
react使うならsass 一択😂