- Traditional CSS
- Simple approach, known API
- we would have to deal with namespace conflicts
- leverages browser caching, storing the entire app style in the first load and reducing following reloads
- Style-based implementations
- Processes JSON-based style rules and creates data to be injected in the component's
style
attribute, plus some event-wrappers (see next) - Can be more powerful but is hackish, as some CSS features do not work on the
style
attribute (pseudo-selectors for instance) - Slower as
style
takes longer to be processed - Heavier: code reuse would be made through separate files (similar to SASS-based), but
style
contents would still be repeated
- Radium
- [Inline] Stylesheet-based implementations
- Processes JSON-based style rules and creates a hash of classes, to be used in the component's
className
- Might use some browser caching, if the stylesheet is extracted to a file
- Helps reducing repeated code, as the page stylesheet would be compiled and can be optimized before attaching it to the DOM
- pure JS approach to features previously seen in different syntaxes such as Less/SASS/SCSS
- Stilr: replaces the same stylesheet node's content
- JSS + JSS-React: ataches a stylesheet node whenever a new component is instantiated, and detaches when all references are gone
- [https://github.com/css-modules/css-modules] / [https://github.com/gajus/react-css-modules]
- [http://reactcss.com]
- [http://survivejs.com/webpack_react/styling_react/]
- Needing re-review: (maybe biased) comparison
| GHS | GitHub Stars | | DLM | NPM Downloads in last month |
- React in Style: 34 GHS / 201 DLM, still beta
- ReactShadow: 213 GHS / 235 DLM, example is broken, uses mixins only