Lots of talk about different CSS solutions for React. This gist attempts to shed light on pros/cons of approaches.

css-with-react-checklist.md

Here is a checklist of all the things I need my CSS solution to handle.

I can explain any of the points. Leave a comment on the gist or tweet @DavidWells

Challenge: Take your favorite CSS solution and see how the checklist holds up.

• Has ability Localize classes
• Has ability to use global classes
• Has ability to write raw CSS
• Syntax highlighting and auto completion
• Syntax highlighting and auto completion outside of atom
• can use css4 spec
• Can use pseudo selectors
• Can use media queries
• Can polyfill Flexbox back to ie8
• Can use all:initial
• Can use CSS vars
• Can externalize CSS on build into separate file
• Can compose and share styles
• Can use styles across multiple components
• Can lint CSS
• Can minify CSS
• Can use less/sass/stylus
• Can use postcss plugins
• Can nest selectors
• Can report on CSS usage and specificity
• Can programmatically parse for a11y compliance
• Can programmatically parse to match brand guidelines
• Can be written by devs and designers (easily)
• Is lock step up to date with latest browser implementation
• Is not locked into implementation and can be reused
• Does not use !important tags to achieve styles
• Bonus: Can use outside of React

I highly recommend and personally use PostCSS and CSS modules, here is why:

• Has ability Localize classes
• Has ability to use global classes
• Has ability to write raw CSS
• Syntax highlighting and auto completion
• Syntax highlighting and auto completion outside of atom
• can use css4 spec
• Can use pseudo selectors
• Can use media queries
• Can polyfill Flexbox back to ie8
• Can use all:initial
• Can use CSS vars
• Can externalize CSS on build into separate file
• Can compose and share styles
• Can use styles across multiple components
• Can lint CSS
• Can minify CSS
• Can use less/sass/stylus
• Can use postcss plugins
• Can nest selectors
• Can report on CSS usage and specificity
• Can programmatically parse for a11y compliance
• Can programmatically parse to match brand guidelines
• Can be written by devs and designers (easily)
• Is lock step up to date with latest browser implementation
• Is not locked into implementation and can be reused
• Does not use !important tags to achieve styles
• Bonus: Can use outside of React

Also perf benefits https://twitter.com/slightlylate/status/851210778078134272

Here are some things you can't do with static CSS, but can do with CSSinJS:

• Real language for code reuse instead of half-baked once (less/sass/stylus)
• Using flow/typescript for styles (better than autocompletion)
• Function values as a replacement for inline styles (local theming, animations)
• Theming
• Styles in the component file (with small components) turns out to be a really nice thing.
• React-native support
• State based CSS. CSS that is generated based on data unknown on the server (f.e. user input, browser env)
• Simple and fast builds

Note: cssinjs is now days not inline styles, its regular CSS generated from JS.

As for JSS, this is the current state:

• Has ability Localize classes
• Has ability to use global classes
• Has ability to write raw CSS (without preprocessing? just use a raw CSS then…)
• Syntax highlighting and auto completion
• Syntax highlighting and auto completion outside of atom
• can use css4 spec
• Can use pseudo selectors
• Can use media queries
• Can polyfill Flexbox back to ie8 (almost there https://github.com/cssinjs/css-vendor)
• Can use all:initial
• Can use CSS vars
• Can externalize CSS on build into separate file
• Can compose and share styles
• Can use styles across multiple components
• Can lint CSS
• Can minify CSS (just use any minification tool on the server)
• Can use less/sass/stylus prejss (haven't tried it personally)
• Can use postcss plugins
• Can nest selectors
• Can report on CSS usage and specificity (no need)
• Can programmatically parse for a11y compliance (didn't try, potentially you can do that with the CSS output from JSS)
• Can programmatically parse to match brand guidelines
• Can be written by devs and designers (easily) highly subjective, I don't know!
• Is lock step up to date with latest browser implementation
• Is not locked into implementation and can be reused (partially)
• Does not use !important tags to achieve styles
• Bonus: Can use outside of React

You cover a lot of ground with "Can use postcss plugins." Personally, my default is Sass with Postcss, with occasional inline styles at the component level. I'll add to the above list:

• Theming support is generally critical in the projects I work on currently. (sass)
• Inline media queries are a necessity (packed with postcss)
• pseudo element support
• import and style svg fragments from a sprite (postcss)
• shareable (npm)