CSS-in-JSのパラダイムシフト
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の
How we migrated 541 components from Styled Components to Emotion with zero bugs
Refactoring CSS is one of the most challenging tasks as a frontend developer. You need to improve the code without altering the look and feel of the UI. But it's tricky to catch visual changes as you refactor an entire production codebase across multiple repos. Moreover, dealing with global styles, overrides, pseudo-states and browser quirks makes the job extra complicated. Last quarter we migrate
SolidJS で使える CSS in JS の調査
まとめ （ライブラリ名はページ内リンクになっています） 2021年9月時点 solid-styled-jsx ❌ npx degit で作ったプロジェクトには非対応。 solid-styled-components ⭕️ 調べた中では唯一、styled の機能が使えた。 Emotion ⚠️ @emotion/css だけ使える。@emotion/styled は非対応。 Linaria ❌ おそらく現時点では Solid 非対応。 Stitches ⚠️ @stitches/core は使えた。 LightwindCSS ⭕️ ここまでのうち、唯一 CSS ファイルの書き出しができる。 2021年12月追加 vanilla-extract ⭕️ これも CSS ファイルの書き出しが可能。
vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.
import { createTheme, style } from '@vanilla-extract/css'; export const [themeClass, vars] = createTheme({ color: { brand: 'blue', white: '#fff' }, space: { small: '4px', medium: '8px', } }); export const hero = style({ backgroundColor: vars.color.brandd, color: vars.color.white, padding: vars.space.large });
Fela
Fela generates unique CSS classes for every rule. It automatically sorts rules, pseudo classes and media queries. This prevents global namespace and specificity conflicts and ensures predictabiity. You always get the styles you write. Fela generates atomic CSS classes. For every property-value pair there's a single rule which can be reused across your whole application. This limits the amount of r
A Thorough Analysis of CSS-in-JS | CSS-Tricks
Wondering what’s even more challenging than choosing a JavaScript framework? You guessed it: choosing a CSS-in-JS solution. Why? Because there are more than 50 libraries out there, each of them offering a unique set of features. We tested 10 different libraries, which are listed here in no particular order: Styled JSX, styled-components, Emotion, Treat, TypeStyle, Fela, Stitches, JSS, Goober, and
Utility First な CSS in JS フレームワークの導入と３ライブラリの比較 - JX通信社エンジニアブログ
JX 通信社のフロントエンドでは React TypeScript や Emotion のような CSS in JS を技術選定することが多いです。弊社 SaaS の FASTALERT、新型コロナ関連情報などでも同様の技術選定で、過去にもエンジニアブログで紹介してきました。 tech.jxpress.net tech.jxpress.net 今日は、Emotion の活用の極地「Utility First な CSS in JS フレームワーク」についてご紹介します。 Emotion で開発する悩み 素の Emotion や類似の CSS in JS ライブラリでは、 1 つの TS/JS ファイル内に CSS を書くような感じでスタイル設定を行っていきます*1。CSS in JS ライブラリに概ね共通しているのが、 styled.タグ名 でスタイリングすることです。 const Tit
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - macaron-css/macaron: Compiled-augmented typesafe CSS-in-JS with zero runtime, colocation, maximum safety and productivity
GitHub - sannajammeh/tw-classed
GitHub - Tahul/pinceau: 🖌️ Make your <script> lighter and your <style> smarter
GitHub - microsoft/griffel: CSS-in-JS with ahead-of-time compilation ⚡️
Stitches — CSS-in-JS with near-zero runtime