My team has been using Radium to style components we are building for an internal component library.
Pros:
- Consuming applications don't have to worry about separately importing a stylesheet for each component, as components come with their own styles baked in. And since the stylesheets are Javascript files, no additional config changes in the consuming applications are needed.
- Since styles are inline, don't have to worry about outward style pollution from poorly written css. Unwanted inward style pollution from the page the components live on can happen, but its been fairly minimal for us (usually from poorly written rules that are too general).
- Writing per-component stylesheets (whether in CSS or JS) promotes modularity and helps reduce dead code.
Cons:
- Only a few of the pseudo-selectors (hover, focus, active) are natively supported right now in Radium.
- We've had a hard time getting media queries working properly, likely in part due to the fact our consuming applications don't use Radium themselves. For now, we've resorted to computing browser width in JS and passing down states (e.g. isMobile, isTablet, etc) to the components as props (not preferable, but it works).
Update: We've been able to get media queries working properly across all of our projects, and its made mobile styling much easier.
- Radium works great at a component level (especially for a component library), but I don't think it scales well to large applications yet (in terms of using it exclusively to manage styles). Other tools mentioned here may do a better job of that.