Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/MicheleBertoli/css-in-js

React: CSS in JS techniques comparison
https://github.com/MicheleBertoli/css-in-js

css-in-js cssinjs

Last synced: 3 months ago
JSON representation

React: CSS in JS techniques comparison

Awesome Lists containing this project

README 

        
[![Build Status](https://travis-ci.org/MicheleBertoli/css-in-js.svg?branch=master)](https://travis-ci.org/MicheleBertoli/css-in-js)



# CSS in JS



React: [CSS in JS](https://speakerdeck.com/vjeux/react-css-in-js) techniques comparison.



## Usage



Inside each package folder, run:



```bash

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](https://github.com/Khan/aphrodite)


tag 2.2.2 star 4,175

 | 1.2.3 | ✓ | ✓ | ✓ | ✓ | ✓ | 
info 63/133
download 358,386
 |

| [babel-plugin-css-in-js](https://github.com/martinandert/babel-plugin-css-in-js)


tag 1.5.1 star 259

 | 1.2.2 | ✓ | ✓ | ✓ | ✓ | ✓ | 
info 6/12
download 408
 |

| [babel-plugin-pre-style](https://github.com/soluml/babel-plugin-pre-style)


tag 1.5.1 star 259

 | 1.0.9-alpha |  | ✓ | ✓ | ✓ | ✓ | 
info 6/12
download 408
 |

| [bloody-react-styled](https://github.com/bloodyowl/react-styled)


tag 0.0.5 star 35

 | 3.0.0 |  | ✓ | ✓ |  |  | 
info 1/2
download 12
 |

| [classy](https://github.com/inturn/classy)


tag 1.4.10 star 22

 | 0.3.0 |  | ✓ | ✓ | ✓ |  | 
info 0/0
download 88
 |

| [csjs](https://github.com/rtsao/csjs)


tag 1.1.0 star 516

 | 1.0.0 |  | ✓ | ✓ |  |  | 
info 22/25
download 1,827
 |

| [css-constructor](https://github.com/siddharthkp/css-constructor)


tag 0.1.7 star 90

 | 0.1.1 | ✓ | ✓ | ✓ |  |  | 
info 4/2
download 65
 |

| [css-light](https://github.com/streamich/css-light)


tag 1.1.0 star 2

 | 1.1.0 |  | ✓ | ✓ | ✓ | ✓ | 
info 1/0
download 54
 |

| [css-loader](https://github.com/webpack/css-loader)


tag 0.28.11 star 2,770

 | 0.15.6 |  | ✓ | ✓ |  | ✓ | 
info 59/496
download 7,442,704
 |

| [css-ns](https://github.com/jareware/css-ns)


tag 1.2.1 star 107

 | 1.0.0 |  | ✓ | ✓ |  | ✓ | 
info 1/1
download 313
 |

| [cssobj](https://github.com/cssobj/cssobj)


tag 1.3.6 star 221

 | 0.2.21 | ✓ | ✓ | ✓ | ✓ |  | 
info 2/12
download 205
 |

| [cssx](https://github.com/krasimir/cssx)


tag 5.2.1 star 998

 | 3.8.0 | ✓ | ✓ | ✓ |  | ✓ | 
info 10/14
download 314
 |

| [cxs](https://github.com/cxs-css/cxs)


tag 6.2.0 star 896

 | 6.2.0 |  | ✓ | ✓ | ✓ | ✓ | 
info 18/20
download 2,940
 |

| [electron-css](https://github.com/azukaar/electron-css)


tag 0.6.0 star 2

 | 0.6.0 |  | ✓ | ✓ | ✓ |  | 
info 0/0
download 135
 |

| [emotion](https://github.com/tkh44/emotion)


tag 9.2.4 star 4,101

 | 6.0.3 | ✓ | ✓ | ✓ | ✓ | ✓ | 
info 73/306
download 260,249
 |

| [es-css-modules](https://github.com/jacobp100/es-css-modules)


tag 1.2.4 star 151

 | 1.2.3 |  | ✓ | ✓ |  | ✓ | 
info 1/2
download 116
 |

| [freestyler](https://github.com/streamich/freestyler)


tag 3.1.0 star 121

 | 1.5.0 | ✓ | ✓ | ✓ | ✓ |  | 
info 12/0
download 212
 |

| [glamor](https://github.com/threepointone/glamor)


tag 2.20.40 star 3,196

 | 2.1.0 | ✓ | ✓ | ✓ | ✓ | ✓ | 
info 79/206
download 842,621
 |

| [glamorous](https://github.com/paypal/glamorous)


tag 4.13.1 star 3,607

 | 4.12.5 | ✓ | ✓ | ✓ | ✓ | ✓ | 
info 1/183
download 795,853
 |

| [hyperstyles](https://github.com/colingourlay/hyperstyles)


tag 3.3.1 star 52

 | 3.3.0 |  | ✓ | ✓ |  | ✓ | 
info 0/3
download 51
 |

| [i-css](https://github.com/irom-io/i-css)


tag 1.2.0 star 2

 | 1.0.4 | ✓ | ✓ | ✓ | ✓ |  | 
info 0/0
download 52
 |

| [j2c](https://github.com/j2css/j2c)


tag 0.11.3 star 155

 | 0.10.0 |  | ✓ | ✓ | ✓ | ✓ | 
info 8/24
download 613
 |

| [jsxstyle](https://github.com/jsxstyle/jsxstyle)


tag 2.1.3 star 1,804

 | 2.1.1 |  | ✓ | ✓ | ✓ | ✓ | 
info 12/75
download 3,174
 |

| [linaria](https://github.com/callstack-io/linaria)


tag 0.5.0 star 351

 | 0.5.0 | ✓ | ✓ | ✓ | ✓ | ✓ | 
info 21/62
download 349
 |

| [nano-css](https://github.com/streamich/nano-css)


tag 2.0.2 star 51

 | 0.1.0 | ✓ | ✓ | ✓ | ✓ | ✓ | 
info 15/3
download 682
 |

| [pre-style](https://github.com/soluml/pre-style)


tag 1.0.9-alpha star 30

 | 1.0.9-alpha |  | ✓ | ✓ |  | ✓ | 
info 4/3
download 16
 |

| [radium](https://github.com/FormidableLabs/radium)


tag 0.24.0 star 6,372

 | 0.13.5 | ✓ | ✓ | ✓ | ✓ |  | 
info 84/475
download 857,067
 |

| [react-css-builder](https://github.com/jhudson8/react-css-builder)


tag 0.2.0 star 20

 | 0.2.0 |  |  |  | ✓ |  | 
info 0/0
download 5
 |

| [react-css-components](https://github.com/andreypopp/react-css-components)


tag 1.0.1 star 701

 | 0.6.9 |  | ✓ | ✓ |  | ✓ | 
info 5/9
download 40
 |

| [react-css-modules](https://github.com/gajus/react-css-modules)


tag 4.7.3 star 4,641

 | 3.0.2 |  | ✓ | ✓ |  | ✓ | 
info 47/152
download 172,299
 |

| [react-cssom](https://github.com/mbasso/react-cssom)


tag 1.0.0 star 54

 | 1.0.0 |  | ✓ | ✓ |  | ✓ | 
info 0/0
download 5
 |

| [react-fela](https://github.com/rofrischmann/fela/tree/master/packages/react-fela)


tag 6.1.8 star 1,402

 | 2.1.0 | ✓ | ✓ | ✓ | ✓ | ✓ | 
info 18/274
download 24,191
 |

| [react-free-style](https://github.com/blakeembrey/react-free-style)


tag 7.0.2 star 119

 | 0.6.0 |  | ✓ | ✓ | ✓ | ✓ | 
info 0/19
download 154
 |

| [react-inline-css](https://github.com/RickWong/react-inline-css)


tag 2.3.1 star 165

 | 1.2.0 |  | ✓ | ✓ |  |  | 
info 6/12
download 10,718
 |

| [react-inline-style](https://github.com/dowjones/react-inline-style)


tag 0.1.0 star 45

 | 0.1.0 | ✓ | ✓ | ✓ | ✓ |  | 
info 1/0
download 4
 |

| [react-inline](https://github.com/martinandert/react-inline)


tag 0.8.2 star 452

 | 0.6.3 | ✓ | ✓ | ✓ | ✓ | ✓ | 
info 3/0
download 121
 |

| [react-jss](https://github.com/jsstyles/react-jss)


tag 8.6.0 star 928

 | 2.0.5 | ✓ | ✓ | ✓ | ✓ | ✓ | 
info 17/180
download 431,995
 |

| [react-look](https://github.com/rofrischmann/react-look)


tag 1.0.1 star 598

 | 0.6.1 | ✓ | ✓ | ✓ | ✓ |  | 
info 14/0
download 77
 |

| [react-native-web](https://github.com/necolas/react-native-web)


tag 0.8.6 star 9,653

 | 0.0.11 | ✓ |  |  | ✓ | ✓ | 
info 21/739
download 51,794
 |

| [react-statics-styles](https://github.com/elierotenberg/react-statics-styles)


tag 3.1.0 star 25

 | 3.0.2 |  | ✓ |  | ✓ | ✓ | 
info 0/0
download 12
 |

| [react-styl](https://github.com/nick/react-styl)


tag 0.0.3 star 42

 | 0.0.1 |  | ✓ | ✓ |  |  | 
info 0/0
download 62
 |

| [react-style](https://github.com/js-next/react-style)


tag 0.5.5 star 1,687

 | 0.5.5 |  |  | ✓ | ✓ | ✓ | 
info 34/65
download 1,500
 |

| [react-styleable](https://github.com/pluralsight/react-styleable)


tag 3.3.0 star 197

 | 1.4.0 |  | ✓ | ✓ |  | ✓ | 
info 1/5
download 1,087
 |

| [react-stylematic](https://github.com/rtsao/react-stylematic)


tag 1.1.0 star 19

 | 1.0.1 | ✓ | ✓ | ✓ | ✓ | ✓ | 
info 1/0
download 1,957
 |

| [react-theme](https://github.com/azazdeaz/react-theme)


tag 0.1.4 star 65

 | 0.1.4 |  |  |  | ✓ |  | 
info 0/0
download 483
 |

| [react-vstyle](https://github.com/fdecampredon/react-vstyle)


tag 0.1.0 star 19

 | 0.1.0 | ✓ | ✓ | ✓ | ✓ | ✓ | 
info 0/0
download 6
 |

| [reactcss](https://github.com/casesandberg/reactcss)


tag 1.2.3 star 1,498

 | 0.3.2 | ✓ |  |  | ✓ |  | 
info 4/43
download 545,864
 |

| [restyles](https://github.com/tkh44/restyles)


tag 2.0.1 star 47

 | 2.0.1 | ✓ | ✓ | ✓ | ✓ |  | 
info 1/1
download 17
 |

| [scope-styles](https://github.com/rtsao/scope-styles)


tag 0.6.0 star 23

 | 0.6.0 |  | ✓ | ✓ | ✓ | ✓ | 
info 7/6
download 1,354
 |

| [smart-css](https://github.com/hackhat/smart-css)


tag 1.1.1 star 73

 | 1.1.1 |  | ✓ | ✓ | ✓ |  | 
info 4/3
download 12
 |

| [stile](https://github.com/bloodyowl/stile)


tag 3.1.0 star 19

___________________________
[react-media-queries](https://github.com/bloodyowl/react-media-queries)


tag 2.0.1 star 65

 | 2.0.0 | ✓ |  | ✓ | ✓ |  | 
info 1/3
download 21
____________
info 1/2
download 22
 |

| [stilr](https://github.com/kodyl/stilr)


tag 1.3.0 star 236

 | 1.1.0 |  | ✓ | ✓ | ✓ | ✓ | 
info 5/18
download 148
 |

| [stylable](https://github.com/wix/stylable)


tag 5.4.9 star 728

 | 5.0.2 |  | ✓ | ✓ |  | ✓ | 
info 62/114
download 9,275
 |

| [style-it](https://github.com/buildbreakdo/style-it)


tag 2.0.0 star 92

 | 1.2.9 |  | ✓ | ✓ |  |  | 
info 1/25
download 2,686
 |

| [styled-components](https://github.com/styled-components/styled-components)


tag 3.3.3 star 17,306

 | 3.2.6 | ✓ | ✓ | ✓ |  |  | 
info 104/1092
download 1,085,338
 |

| [styled-jsx](https://github.com/zeit/styled-jsx)


tag 2.2.7 star 3,275

 | 0.0.7 | ✓ | ✓ | ✓ |  | ✓ | 
info 21/284
download 186,617
 |

| [styletron-react](https://github.com/rtsao/styletron)


tag 3.0.4 star 2,485

 | 2.1.2 | ✓ | ✓ | ✓ | ✓ | ✓ | 
info 59/82
download 5,709
 |

| [styling](https://github.com/andreypopp/styling)


tag 0.4.1 star 130

 | 0.2.0 |  | ✓ |  | ✓ | ✓ | 
info 5/2
download 49
 |

| [superstyle](https://github.com/jxnblk/superstyle)


tag 1.0.0-1 star 31

 | 1.0.0-1 |  |  |  | ✓ |  | 
info 0/1
download 5
 |

| [@thi.ng/hiccup-css](https://github.com/thi-ng/umbrella/tree/master/packages/hiccup-css)


tag 0.2.3 star 170

 | 0.2.0 | ✓ | ✓ | ✓ | ✓ | ✓ | 
info 5/14
download 537
 |

| [typestyle](https://github.com/typestyle/typestyle)


tag 2.0.1 star 1,919

 | 0.22.3 |  | ✓ | ✓ | ✓ | ✓ | 
info 15/151
download 23,530
 |

| [uranium](https://github.com/tuckerconnelly/uranium)


tag 0.1.0 star 117

 | 0.1.2 |  |  | ✓ | ✓ |  | 
info 3/6
download 6
 |



> This list has been auto-updated ([?](https://github.com/albinotonnina/mmarkdown)) on August 8, 2018



## Testimonials



> ["Wow, this totally makes my week!"](https://twitter.com/dan_abramov/status/604260877622202368) - Dan Abramov



> ["nice compilation of css-in-js techniques"](https://twitter.com/tjholowaychuk/status/739812614239195136) - TJ Holowaychuk



[SurviveJS / Styling React](http://survivejs.com/webpack_react/styling_react/) by Juho Vepsäläinen



[The Case for CSS Modules](http://markdalgleish.github.io/presentation-the-case-for-css-modules) by Mark Dalgleish



[First Class Styles](https://markdalgleish.github.io/presentation-first-class-styles) by Mark Dalgleish



[Styling React.JS applications](https://www.youtube.com/watch?v=19gqsBc_Cx0) by Max Stoiber



## Contributing



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



1.  Create a new folder named `package-name` in the root folder.

2.  Implement the red button example using the package.

3.  Add a new entry to [data.json](webpage/src/data.json).

4.  Rename `ReadmeSrc/.env_example` to `ReadmeSrc/.env` and set a [Github access token](https://github.com/settings/tokens) to retrieve data from Github.

5.  Re-generate the data with: `cd ReadmeSrc && yarn && yarn update-data && yarn generate-readme`.