MicheleBertoli/css-in-js

React: CSS in JS techniques comparison

5,473

stars

172

commits

JavaScript

primary language

Apr 2, 2024

updated

michelebertoli.github.io/css-in-js/

css-in-js

cssinjs

Browse cluster: CSS-in-JS and Styled Components →

README

CSS in JS

React: CSS in JS techniques comparison.

Usage

Inside each package folder, run:

npm i
npm run build && open index.html

Features

How to read the table

More ticks doesn't mean "better", it depends on your needs. For example, if a package supports the css file extraction you can run the autoprefixing at build time.

Package	Version	Automatic Vendor Prefixing	Pseudo Classes	Media Queries	Styles As Object Literals	Extract CSS File	Package Stats
aphrodite _2.2.2 _4,175	1.2.3	✓	✓	✓	✓	✓	_63/133 _358,386
babel-plugin-css-in-js _1.5.1 ₂₅₉	1.2.2	✓	✓	✓	✓	✓	_6/12 ₄₀₈
babel-plugin-pre-style _1.5.1 ₂₅₉	1.0.9-alpha		✓	✓	✓	✓	_6/12 ₄₀₈
bloody-react-styled _0.0.5 ₃₅	3.0.0		✓	✓			_1/2 ₁₂
classy _1.4.10 ₂₂	0.3.0		✓	✓	✓		_0/0 ₈₈
csjs _1.1.0 ₅₁₆	1.0.0		✓	✓			_22/25 _1,827
css-constructor _0.1.7 ₉₀	0.1.1	✓	✓	✓			_4/2 ₆₅
css-light _1.1.0 ₂	1.1.0		✓	✓	✓	✓	_1/0 ₅₄
css-loader _0.28.11 _2,770	0.15.6		✓	✓		✓	_59/496 _7,442,704
css-ns _1.2.1 ₁₀₇	1.0.0		✓	✓		✓	_1/1 ₃₁₃
cssobj _1.3.6 ₂₂₁	0.2.21	✓	✓	✓	✓		_2/12 ₂₀₅
cssx _5.2.1 ₉₉₈	3.8.0	✓	✓	✓		✓	_10/14 ₃₁₄
cxs _6.2.0 ₈₉₆	6.2.0		✓	✓	✓	✓	_18/20 _2,940
electron-css _0.6.0 ₂	0.6.0		✓	✓	✓		_0/0 ₁₃₅
emotion _9.2.4 _4,101	6.0.3	✓	✓	✓	✓	✓	_73/306 _260,249
es-css-modules _1.2.4 ₁₅₁	1.2.3		✓	✓		✓	_1/2 ₁₁₆
freestyler _3.1.0 ₁₂₁	1.5.0	✓	✓	✓	✓		_12/0 ₂₁₂
glamor _2.20.40 _3,196	2.1.0	✓	✓	✓	✓	✓	_79/206 _842,621
glamorous _4.13.1 _3,607	4.12.5	✓	✓	✓	✓	✓	_1/183 _795,853
hyperstyles _3.3.1 ₅₂	3.3.0		✓	✓		✓	_0/3 ₅₁
i-css _1.2.0 ₂	1.0.4	✓	✓	✓	✓		_0/0 ₅₂
j2c _0.11.3 ₁₅₅	0.10.0		✓	✓	✓	✓	_8/24 ₆₁₃
jsxstyle _2.1.3 _1,804	2.1.1		✓	✓	✓	✓	_12/75 _3,174
linaria _0.5.0 ₃₅₁	0.5.0	✓	✓	✓	✓	✓	_21/62 ₃₄₉
nano-css _2.0.2 ₅₁	0.1.0	✓	✓	✓	✓	✓	_15/3 ₆₈₂
pre-style _1.0.9-alpha ₃₀	1.0.9-alpha		✓	✓		✓	_4/3 ₁₆
radium _0.24.0 _6,372	0.13.5	✓	✓	✓	✓		_84/475 _857,067
react-css-builder _0.2.0 ₂₀	0.2.0				✓		_0/0 ₅
react-css-components _1.0.1 ₇₀₁	0.6.9		✓	✓		✓	_5/9 ₄₀
react-css-modules _4.7.3 _4,641	3.0.2		✓	✓		✓	_47/152 _172,299
react-cssom _1.0.0 ₅₄	1.0.0		✓	✓		✓	_0/0 ₅
react-fela _6.1.8 _1,402	2.1.0	✓	✓	✓	✓	✓	_18/274 _24,191
react-free-style _7.0.2 ₁₁₉	0.6.0		✓	✓	✓	✓	_0/19 ₁₅₄
react-inline-css _2.3.1 ₁₆₅	1.2.0		✓	✓			_6/12 _10,718
react-inline-style _0.1.0 ₄₅	0.1.0	✓	✓	✓	✓		_1/0 ₄
react-inline _0.8.2 ₄₅₂	0.6.3	✓	✓	✓	✓	✓	_3/0 ₁₂₁
react-jss _8.6.0 ₉₂₈	2.0.5	✓	✓	✓	✓	✓	_17/180 _431,995
react-look _1.0.1 ₅₉₈	0.6.1	✓	✓	✓	✓		_14/0 ₇₇
react-native-web _0.8.6 _9,653	0.0.11	✓			✓	✓	_21/739 _51,794
react-statics-styles _3.1.0 ₂₅	3.0.2		✓		✓	✓	_0/0 ₁₂
react-styl _0.0.3 ₄₂	0.0.1		✓	✓			_0/0 ₆₂
react-style _0.5.5 _1,687	0.5.5			✓	✓	✓	_34/65 _1,500
react-styleable _3.3.0 ₁₉₇	1.4.0		✓	✓		✓	_1/5 _1,087
react-stylematic _1.1.0 ₁₉	1.0.1	✓	✓	✓	✓	✓	_1/0 _1,957
react-theme _0.1.4 ₆₅	0.1.4				✓		_0/0 ₄₈₃
react-vstyle _0.1.0 ₁₉	0.1.0	✓	✓	✓	✓	✓	_0/0 ₆
reactcss _1.2.3 _1,498	0.3.2	✓			✓		_4/43 _545,864
restyles _2.0.1 ₄₇	2.0.1	✓	✓	✓	✓		_1/1 ₁₇
scope-styles _0.6.0 ₂₃	0.6.0		✓	✓	✓	✓	_7/6 _1,354
smart-css _1.1.1 ₇₃	1.1.1		✓	✓	✓		_4/3 ₁₂
stile _3.1.0 ₁₉ ___________________________ react-media-queries _2.0.1 ₆₅	2.0.0	✓		✓	✓		_1/3 ₂₁ ____________ _1/2 ₂₂
stilr _1.3.0 ₂₃₆	1.1.0		✓	✓	✓	✓	_5/18 ₁₄₈
stylable _5.4.9 ₇₂₈	5.0.2		✓	✓		✓	_62/114 _9,275
style-it _2.0.0 ₉₂	1.2.9		✓	✓			_1/25 _2,686
styled-components _3.3.3 _17,306	3.2.6	✓	✓	✓			_104/1092 _1,085,338
styled-jsx _2.2.7 _3,275	0.0.7	✓	✓	✓		✓	_21/284 _186,617
styletron-react _3.0.4 _2,485	2.1.2	✓	✓	✓	✓	✓	_59/82 _5,709
styling _0.4.1 ₁₃₀	0.2.0		✓		✓	✓	_5/2 ₄₉
superstyle _1.0.0-1 ₃₁	1.0.0-1				✓		_0/1 ₅
@thi.ng/hiccup-css _0.2.3 ₁₇₀	0.2.0	✓	✓	✓	✓	✓	_5/14 ₅₃₇
typestyle _2.0.1 _1,919	0.22.3		✓	✓	✓	✓	_15/151 _23,530
uranium _0.1.0 ₁₁₇	0.1.2			✓	✓		_3/6 ₆

This list has been auto-updated (?) on August 8, 2018

Testimonials

"Wow, this totally makes my week!" - Dan Abramov

"nice compilation of css-in-js techniques" - TJ Holowaychuk

SurviveJS / Styling React by Juho Vepsäläinen

The Case for CSS Modules by Mark Dalgleish

First Class Styles by Mark Dalgleish

Styling React.JS applications by Max Stoiber

Contributing

If your package is not listed here, feel free to add it.

Create a new folder named package-name in the root folder.
Implement the red button example using the package.
Add a new entry to data.json.
Rename ReadmeSrc/.env_example to ReadmeSrc/.env and set a Github access token to retrieve data from Github.
Re-generate the data with: cd ReadmeSrc && yarn && yarn update-data && yarn generate-readme.

Contributors

(top 30 of 35)

120 commits

4 commits

4 commits

3 commits

Similar repos

emotion-js/emotion

👩‍🎤 CSS-in-JS library designed for high performance style composition

18,017

zeit/styled-jsx

Full CSS support for JSX without compromises

7,775

vercel/styled-jsx

Full CSS support for JSX without compromises

7,774

gucong3000/postcss-jsx

PostCSS syntax for parsing CSS in JS literals

styled-components/styled-components

Fast, expressive styling for React. Server components, client components, streaming SSR, React…

41,102

gajus/css-in-js-arena

Comparison of modern CSS-in-JS frameworks.

styled-components/polished

A lightweight toolset for writing styles in JavaScript ✨

7,662

typicode/mistcss

Create visual components for React without JavaScript or TypeScript. Leverage native HTML and CSS.…

1,642

Languages

JavaScript

77.5%

HTML

16.9%

CSS

5.4%

MicheleBertoli/css-in-js

React: CSS in JS techniques comparison

5,473

stars

172

commits

JavaScript

primary language

Apr 2, 2024

updated

michelebertoli.github.io/css-in-js/

css-in-js

cssinjs

Browse cluster: CSS-in-JS and Styled Components →

README

CSS in JS

React: CSS in JS techniques comparison.

Usage

Inside each package folder, run:

npm i
npm run build && open index.html

Features

How to read the table

More ticks doesn't mean "better", it depends on your needs. For example, if a package supports the css file extraction you can run the autoprefixing at build time.

Package	Version	Automatic Vendor Prefixing	Pseudo Classes	Media Queries	Styles As Object Literals	Extract CSS File	Package Stats
aphrodite _2.2.2 _4,175	1.2.3	✓	✓	✓	✓	✓	_63/133 _358,386
babel-plugin-css-in-js _1.5.1 ₂₅₉	1.2.2	✓	✓	✓	✓	✓	_6/12 ₄₀₈
babel-plugin-pre-style _1.5.1 ₂₅₉	1.0.9-alpha		✓	✓	✓	✓	_6/12 ₄₀₈
bloody-react-styled _0.0.5 ₃₅	3.0.0		✓	✓			_1/2 ₁₂
classy _1.4.10 ₂₂	0.3.0		✓	✓	✓		_0/0 ₈₈
csjs _1.1.0 ₅₁₆	1.0.0		✓	✓			_22/25 _1,827
css-constructor _0.1.7 ₉₀	0.1.1	✓	✓	✓			_4/2 ₆₅
css-light _1.1.0 ₂	1.1.0		✓	✓	✓	✓	_1/0 ₅₄
css-loader _0.28.11 _2,770	0.15.6		✓	✓		✓	_59/496 _7,442,704
css-ns _1.2.1 ₁₀₇	1.0.0		✓	✓		✓	_1/1 ₃₁₃
cssobj _1.3.6 ₂₂₁	0.2.21	✓	✓	✓	✓		_2/12 ₂₀₅
cssx _5.2.1 ₉₉₈	3.8.0	✓	✓	✓		✓	_10/14 ₃₁₄
cxs _6.2.0 ₈₉₆	6.2.0		✓	✓	✓	✓	_18/20 _2,940
electron-css _0.6.0 ₂	0.6.0		✓	✓	✓		_0/0 ₁₃₅
emotion _9.2.4 _4,101	6.0.3	✓	✓	✓	✓	✓	_73/306 _260,249
es-css-modules _1.2.4 ₁₅₁	1.2.3		✓	✓		✓	_1/2 ₁₁₆
freestyler _3.1.0 ₁₂₁	1.5.0	✓	✓	✓	✓		_12/0 ₂₁₂
glamor _2.20.40 _3,196	2.1.0	✓	✓	✓	✓	✓	_79/206 _842,621
glamorous _4.13.1 _3,607	4.12.5	✓	✓	✓	✓	✓	_1/183 _795,853
hyperstyles _3.3.1 ₅₂	3.3.0		✓	✓		✓	_0/3 ₅₁
i-css _1.2.0 ₂	1.0.4	✓	✓	✓	✓		_0/0 ₅₂
j2c _0.11.3 ₁₅₅	0.10.0		✓	✓	✓	✓	_8/24 ₆₁₃
jsxstyle _2.1.3 _1,804	2.1.1		✓	✓	✓	✓	_12/75 _3,174
linaria _0.5.0 ₃₅₁	0.5.0	✓	✓	✓	✓	✓	_21/62 ₃₄₉
nano-css _2.0.2 ₅₁	0.1.0	✓	✓	✓	✓	✓	_15/3 ₆₈₂
pre-style _1.0.9-alpha ₃₀	1.0.9-alpha		✓	✓		✓	_4/3 ₁₆
radium _0.24.0 _6,372	0.13.5	✓	✓	✓	✓		_84/475 _857,067
react-css-builder _0.2.0 ₂₀	0.2.0				✓		_0/0 ₅
react-css-components _1.0.1 ₇₀₁	0.6.9		✓	✓		✓	_5/9 ₄₀
react-css-modules _4.7.3 _4,641	3.0.2		✓	✓		✓	_47/152 _172,299
react-cssom _1.0.0 ₅₄	1.0.0		✓	✓		✓	_0/0 ₅
react-fela _6.1.8 _1,402	2.1.0	✓	✓	✓	✓	✓	_18/274 _24,191
react-free-style _7.0.2 ₁₁₉	0.6.0		✓	✓	✓	✓	_0/19 ₁₅₄
react-inline-css _2.3.1 ₁₆₅	1.2.0		✓	✓			_6/12 _10,718
react-inline-style _0.1.0 ₄₅	0.1.0	✓	✓	✓	✓		_1/0 ₄
react-inline _0.8.2 ₄₅₂	0.6.3	✓	✓	✓	✓	✓	_3/0 ₁₂₁
react-jss _8.6.0 ₉₂₈	2.0.5	✓	✓	✓	✓	✓	_17/180 _431,995
react-look _1.0.1 ₅₉₈	0.6.1	✓	✓	✓	✓		_14/0 ₇₇
react-native-web _0.8.6 _9,653	0.0.11	✓			✓	✓	_21/739 _51,794
react-statics-styles _3.1.0 ₂₅	3.0.2		✓		✓	✓	_0/0 ₁₂
react-styl _0.0.3 ₄₂	0.0.1		✓	✓			_0/0 ₆₂
react-style _0.5.5 _1,687	0.5.5			✓	✓	✓	_34/65 _1,500
react-styleable _3.3.0 ₁₉₇	1.4.0		✓	✓		✓	_1/5 _1,087
react-stylematic _1.1.0 ₁₉	1.0.1	✓	✓	✓	✓	✓	_1/0 _1,957
react-theme _0.1.4 ₆₅	0.1.4				✓		_0/0 ₄₈₃
react-vstyle _0.1.0 ₁₉	0.1.0	✓	✓	✓	✓	✓	_0/0 ₆
reactcss _1.2.3 _1,498	0.3.2	✓			✓		_4/43 _545,864
restyles _2.0.1 ₄₇	2.0.1	✓	✓	✓	✓		_1/1 ₁₇
scope-styles _0.6.0 ₂₃	0.6.0		✓	✓	✓	✓	_7/6 _1,354
smart-css _1.1.1 ₇₃	1.1.1		✓	✓	✓		_4/3 ₁₂
stile _3.1.0 ₁₉ ___________________________ react-media-queries _2.0.1 ₆₅	2.0.0	✓		✓	✓		_1/3 ₂₁ ____________ _1/2 ₂₂
stilr _1.3.0 ₂₃₆	1.1.0		✓	✓	✓	✓	_5/18 ₁₄₈
stylable _5.4.9 ₇₂₈	5.0.2		✓	✓		✓	_62/114 _9,275
style-it _2.0.0 ₉₂	1.2.9		✓	✓			_1/25 _2,686
styled-components _3.3.3 _17,306	3.2.6	✓	✓	✓			_104/1092 _1,085,338
styled-jsx _2.2.7 _3,275	0.0.7	✓	✓	✓		✓	_21/284 _186,617
styletron-react _3.0.4 _2,485	2.1.2	✓	✓	✓	✓	✓	_59/82 _5,709
styling _0.4.1 ₁₃₀	0.2.0		✓		✓	✓	_5/2 ₄₉
superstyle _1.0.0-1 ₃₁	1.0.0-1				✓		_0/1 ₅
@thi.ng/hiccup-css _0.2.3 ₁₇₀	0.2.0	✓	✓	✓	✓	✓	_5/14 ₅₃₇
typestyle _2.0.1 _1,919	0.22.3		✓	✓	✓	✓	_15/151 _23,530
uranium _0.1.0 ₁₁₇	0.1.2			✓	✓		_3/6 ₆

This list has been auto-updated (?) on August 8, 2018

Testimonials

"Wow, this totally makes my week!" - Dan Abramov

"nice compilation of css-in-js techniques" - TJ Holowaychuk

SurviveJS / Styling React by Juho Vepsäläinen

The Case for CSS Modules by Mark Dalgleish

First Class Styles by Mark Dalgleish

Styling React.JS applications by Max Stoiber

Contributing

If your package is not listed here, feel free to add it.

Create a new folder named package-name in the root folder.
Implement the red button example using the package.
Add a new entry to data.json.
Rename ReadmeSrc/.env_example to ReadmeSrc/.env and set a Github access token to retrieve data from Github.
Re-generate the data with: cd ReadmeSrc && yarn && yarn update-data && yarn generate-readme.

Similar repos

emotion-js/emotion

👩‍🎤 CSS-in-JS library designed for high performance style composition

18,017

zeit/styled-jsx

Full CSS support for JSX without compromises

7,775

vercel/styled-jsx

Full CSS support for JSX without compromises

7,774

gucong3000/postcss-jsx

PostCSS syntax for parsing CSS in JS literals

styled-components/styled-components

Fast, expressive styling for React. Server components, client components, streaming SSR, React…

41,102

gajus/css-in-js-arena

Comparison of modern CSS-in-JS frameworks.

styled-components/polished

A lightweight toolset for writing styles in JavaScript ✨

7,662

typicode/mistcss

Create visual components for React without JavaScript or TypeScript. Leverage native HTML and CSS.…

1,642

Contributors

(top 30 of 35)

120 commits

4 commits

4 commits

3 commits

Languages

JavaScript

77.5%

HTML

16.9%

CSS

5.4%