A neat way to go is to work with a library, I've been trying out material-ui.com on a project and really like it, then I just override with inline CSS anytime I need to, which, frankly, is infrequently. Each component only requires the styles it needs so it retains modularity and does a lot of work for you. getessence.io is also a nice one, with a bit more of a learning curve, I thought.

I'm using less design styles based on semantic-ui. Also I use a Radium. I know this is confused way. So there are some rule for our ways.

• Radium styles are used only for position or size handling such as width, height, padding, margin, top, display ..
• less css used for global styles and specific dom design.

Radium is used only react front developers.

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.

It depends.

While css-modules works fine for private projects, it does not fit good for open source projects. The reason it's because if you use css-modules then you are forcing your library user to set up some extra config.

For open source libraries, I think it's better to use inline styles, because on that way the end user just have to include and use your component. I recommend radium to achieve this.

Also use css-modules, be aware that this will change the class names of the html thats rendered which may impact functional testing using selenium and css selectors by classname.

After agonising with straight CSS and then various component implementations, I settled on simply using css-modules and compiling them through webpack's css-loader. There's just far less friction doing it this way.