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

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)