Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/styled-components/comparison

Comparing different ways to style components
https://github.com/styled-components/comparison

Last synced: about 1 month ago
JSON representation

Comparing different ways to style components

Host: GitHub
URL: https://github.com/styled-components/comparison
Owner: styled-components
License: mit
Archived: true
Created: 2016-07-26T08:36:07.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2019-01-27T10:23:18.000Z (almost 6 years ago)
Last Synced: 2024-09-24T22:05:05.476Z (about 2 months ago)
Language: JavaScript
Size: 465 KB
Stars: 182
Watchers: 12
Forks: 23
Open Issues: 18
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md

Awesome Lists containing this project

README

# ⚠️ WARNING: This repository is completely out of date, it was made in 2016. Do not rely on any of this information! ⚠️

Click here if you really want to see the old, out of date readme

# Comparison

A deeper comparison between a selected few libraries for styling react applications and component libraries.

## Scope

Our goal here is to make the same component using various frameworks to compare features and implementations. While the component is small, we built in certain constraints you might have in a real world app (e.g. `dangerouslySetInnerHTML`) to help compare the libraries. We do a deeper dive with a selected number of frameworks to see how they scale and where the boundaries are.

This repo is set up so all common code is shared – inside the examples themselves, you'll _only see what's different_ to the other methods. That's true even for the build process and dependencies, you'll only see the changes you need to make to the build process and the dependencies you need to add for a certain method, not all of it.

## Examples

You can start an example by running `npm install` in the `examples/` folder (only have to do that once), then running `npm install` inside the folder of the example you want to run and then running `npm start`.

Here are quick links to all the existing examples: (or just check out the `examples/` folder)

- [Vanilla CSS](./examples/css)
- [Aphrodite](./examples/aphrodite)
- [CSS Modules](./examples/css-modules)
- [JSS](./examples/jss)
- [Radium](./examples/radium)
- [`styled-components`](./examples/styled-components)

We have issues open for the frameworks we're planning on implementing; if you think there's a strong case for adding one that's not on our list please open an issue to let us know!

*For a complete reference with less deep-div of all the available frameworks see [MicheleBertoli/css-in-js](https://github.com/MicheleBertoli/css-in-js)*

## License