Good question. Intuitively, having inline styles over style sheets goes against common patterns involving maintainability of large code bases, ditching mixins, variables, and other helpful functions that preprocessors like Sass provide you with.
The idea is that you gain extra maintainability points by co-locating your styling with your logic and DOM, a pervasive design patter in React in general. If I want to style a particular view, I no longer have to concern myself with which stylesheets contain styling for that view. I can simply go to the React Component where that view is owned, and see the styling for it right there.
I know this project uses browserify but by switching to webpack you could achieve the same thing without inline styles by exporting a style bundle. Take a look at the sass-loader[1] package which will let you configure webpack so that you can simply do a require('./style.scss'); and have the style included into either the main or a separate bundle.
Sweet! I keep hearing good things about Webpack, including good integration with React Hot Loader[1]. Will create a ticket in repo to assess switching over to Webpack :)
The idea is that you gain extra maintainability points by co-locating your styling with your logic and DOM, a pervasive design patter in React in general. If I want to style a particular view, I no longer have to concern myself with which stylesheets contain styling for that view. I can simply go to the React Component where that view is owned, and see the styling for it right there.
See also:
- https://speakerdeck.com/vjeux/react-css-in-js
- https://github.com/FormidableLabs/radium