![](https://cdn-ak-scissors.b.st-hatena.com/image/square/1c82b6e115cea7c08dffc7ab9c9b4060f65ec60d/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--rTO2B7g5--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ACSS-in-JS%2525E3%252581%2525AE%2525E3%252583%252591%2525E3%252583%2525A9%2525E3%252583%252580%2525E3%252582%2525A4%2525E3%252583%2525A0%2525E3%252582%2525B7%2525E3%252583%252595%2525E3%252583%252588%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Apoteboy%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzBiNDBmNjc5Y2UuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
エントリーの編集
![loading...](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/common/loading@2x.gif)
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
記事へのコメント14件
- 注目コメント
- 新着コメント
![w_bonbon w_bonbon](https://cdn.profile-image.st-hatena.com/users/w_bonbon/profile.png)
w_bonbon
便利で使ってたけどあまりにwebpackみたいなバンドルツールへの依存が強いと標準から離れすぎてあれだなぁって思って一周回ってclassName+普通のpostCSSに戻ってきてしまったw
![cpw cpw](https://cdn.profile-image.st-hatena.com/users/cpw/profile.png)
cpw
正直デバッグとかいろいろ考えるとHTMLにはcssクラス名が静的に吐かれてほしい。cssのクラス名がコンポーネントを特定するのに役立ってるんだよね。いろいろ考えるとscssくらいがちょうどよいと思ってる。
![mumei-0 mumei-0](https://cdn.profile-image.st-hatena.com/users/mumei-0/profile.png)
mumei-0
Zero-runtime CSS-in-JS のLinaria や vanilla-extract が出てきてから、相対的に runtime CSS-in-JS の Emotionやstyled-components が少し古い技術になってしまった。
![tech0403 tech0403](https://cdn.profile-image.st-hatena.com/users/tech0403/profile.png)
tech0403
CSS-in-JSが人気とか書いてるが、最初から見切りを付けてる人達も相当数いる。文字列としてCSSを記述する事の前時代感。開発中は補完も効かないし、実行時はスタイル適用が遅れるというポンコツっぷり
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
![アプリのスクリーンショット](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/entry/app-screenshot.png)
いまの話題をアプリでチェック!
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
CSS-in-JSのパラダイムシフト
2023年現在、Reactでは多種多様なスタイリング手法が用意されています。 代表どころで言うとCSS Modules...要を表示
2023年現在、Reactでは多種多様なスタイリング手法が用意されています。 代表どころで言うとCSS ModulesやTailwind、CSS-in-JSなどが有名です。筆者の個人的な好みでは、これらの選択肢の中でもCSS-in-JSを用いたスタイルが特に好きですが、CSS-in-JSライブラリ群の中にはランタイムでスタイリング処理がなされる為にパフォーマンス上の問題を抱えているとの指摘を受けているものもあり、最近は人気が下火になっているように感じています。 そこで本記事では、CSS-in-JSが生まれた背景から遡り、各ライブラリの内部実装を確認しながらそれぞれのライブラリの仕組み・メリット・問題点を明らかにし、CSS-in-JSのパラダイムシフトを追ってみたいと思います。 CSS-in-JSの登場 CSS-in-JSという言葉が最初に公の場で登場したのは、2014年にFacebookの
2023/04/06 リンク