Discussion on: 5 Ways to Write CSS Styles in React

I've used SASS, Styled Components, pure CSS, CSS-in-JS and CSS modules, and the clear winner to me is Linaria.

linaria.now.sh/

It's very similar in syntax to Styled Components (can't tell the difference) but it's got one major benefit: instead of extracting styles on runtime, it does this when you build the production version. It puts each components styles in a separate, pure CSS stylesheet.

Here's a list of features from their website:

• Write CSS in JS, but with zero runtime, CSS is extracted to CSS files during build
• Familiar CSS syntax with Sass like nesting
• Use dynamic prop based styles with the React bindings, uses CSS variables behind the scenes
• Easily find where the style was defined with CSS sourcemaps
• Lint your CSS in JS with stylelint
• Use JavaScript for logic, no CSS preprocessor needed
• Optionally use any CSS preprocessor such as Sass or PostCSS

This gives you all the benefits of pure CSS, as well as all the benefits of CSS-in-JS, without any of the downsides.

I would highly recommend Linaria as an alternative for JSS, and no, I don't work for them. I just love using it!