React components styling dilemma

Question

I start making new project using React and Redux. I'm new to React and not sure about what kind of styling mehtod I should use. Apparently I want to use the one that will not decrease performance, give all features of CSS3, and be maintainable. So the choices are:

1. Inline styling using Radium
2. SASS
3. CSS Modules

I've long experience working with SASS and CSS3.Nevertheless Inline Styling really impressed me but it does not provide autoprefixer and some other nice automation features. Obviously there's no ultimate choice, but what is the most efficient one?

Answer 1

I would personally recommend a combination of glamor and glamorous. Glamorous is build on glamor so you can leverage both for different purposes.

With glamor, you can inject global styles into the page like:

css.global('h1', { fontSize: '3rem' })

With glamorous, you can create React components that make styling things more intuitive, like:

glamorous.Div({ padding: '2rem', background: 'red' })

return <Div>Some text</Div>

Personally I prefer to use CSS-in-JS versus a pre-processor like Sass/LESS or using some sort of CSS-like tool. I find trying to write CSS in a template tag or in another file is cumbersome and annoying. Leveraging JavaScript directly for styling is actually quite enjoyable once you get used to it.

Shameless plug: I've created a helper library for CSS-in-JS project that automatically generates helpful styling classes like what you find in Bootstrap (eg .text-center, .ml-auto, .display-block etc). It's called Euphoria, check it out!