I am doing some research for a large project which will use reactJs and all html elements will be converted to React Components.
As we all know, css has a big problem with globals so there is a lot of posibility of css conflicts.
There are lots of different options for this including:
Atomic Design
SMACSS
OOCSS
or using libraries like:
Radium
React Style
React Inline
jsxstyle
React JSS
React Inline CSS
React Look
React Statics Styles
All of these have something good but at the same time all are under experiment and missing things.
In other words none of them solve all the css problems in react component styling or some just try to solve a problem that isn't there.
After trying all of them I am half way thinking that I should just link to common styles css files and have a css file specific to each component and target that css file from within the component.
Has anyone here had experience in styling react components in large project and have any feedback on it or suggestions?
I simply cannot make up my mind on just using straight css or javascript for this.
Is there anything I've missed to research?
There's nothing wrong on including CSS with your solution, SASS and LESS are awesome.
However, I personally like inline styles a as a plain JS object because it gives you the whole power of JS, so you can be as dynamic as you want, make the calculations all the calcs you need without pre-processing css, etc...
The React team has been investing in this for a while (React Native already uses this by default) here's a to React Native Styles, and a Presentation from a Facebook engineer, and a Proposal from the reactjs/react-future repo, and there are nice libraries like Radium which helps you a lot.
CSS in JS is surely getting better each day, so yeah, I'd advise on making that jump. :)