https://github.com/tuchk4/css-in-js-app

There is React application with implemented different css-in-js approaches
https://github.com/tuchk4/css-in-js-app

Last synced: 17 days ago
JSON representation

There is React application with implemented different css-in-js approaches

• Host: GitHub
• URL: https://github.com/tuchk4/css-in-js-app
• Owner: tuchk4
• Created: 2017-03-21T10:10:12.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-07-03T21:26:04.000Z (over 6 years ago)
• Last Synced: 2024-10-03T12:24:03.546Z (about 1 month ago)
• Language: JavaScript
• Homepage: https://tuchk4.github.io/css-in-js-app/#/
• Size: 15 MB
• Stars: 43
• Watchers: 3
• Forks: 11
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-css-in-js - tuchk4/css-in-js-app - 使用不同的cssin - js方法和库进行应用。 (基准测试)

README

        
# Css in JS App

### [tuchk4.github.io/css-in-js-app](https://tuchk4.github.io/css-in-js-app)

There is React application with implemented different css-in-js approaches:

- [Aphrodite](https://github.com/Khan/aphrodite)

- [Emotion](https://github.com/emotion-js/emotion)

- [Fela](https://github.com/rofrischmann/fela)

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

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

- [JSS](https://github.com/cssinjs/jss)

- [rockey](https://github.com/tuchk4/rockey)

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

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

- and example with React inline styles

Each bundle is lazy initializing (so for better results update page before test to keep initialized only current bundle). Also

there are:

- Timers for rendering 4000 same components and 4000 different components with styles defined in JS.

- Checkbox to switch `primary` property

- Input to change text

- Links to source code of each bundle

![CSS in JS Screenshot](https://monosnap.com/file/CQNzOFX3vXqlf00drV0QMHgtaHM5X9.png)