How do you use CSS with React


(Stoke Master Jack) #1

I’d like to get a feel for how others are using CSS with React.

I see that the create-react-app starter app uses a bunch of external css. But I have always used in-line styles. Even before React (in GWT). I just find it easier to maintain.

For React, I have been using jsxstyle from Pete Hunt since it came out. I love it. It makes css-in-js very clean and simple. I use Row and Col like crazy. But I need to create a responsive app and jsxstyle does not support media queries.

Are you using css in js or external stylesheet? If CSS in JS, what particular tool?


(Mikayel) #2

I prefer to use import "app.css" . Some times I have separate css for each component.
I prefer not to use css in js, it is making my code not flexible.
I think webpack in enough for tooling. No SASS, no LESS etc.

Minimum dependence minimum headache!


(Eduard Tkv) #3

I read a book published last December. It says that as per React philosophy in-line styles are what supposed to be in theory i.e. it’s a component based architecture so every component ideally would have their own style but in practice most people just import an external stylesheet due to known disadvantages of in-line styles.


(peterm) #4

I use css modules, and usually have simple logic for determining which classes get applied to a particular DOM node at runtime. It’s more performant, especially in larger scale projects (presumably it makes reconciliation more efficient). Another nice advantage of css modules is separation of concerns. Since all of your classnames are being compiled, the architecture encourages writing simpler selectors. And in terms of code clarify (this is more personal preference), but I tend to prefer keeping browser styling details separate from business logic in my JavaScript.


(JustBreak) #5

I find using external css files more ‘separation’ than an inline. I want my react components to look neat and easy to read/maintain so much less it only contains jsx elements + redux stuff.

Also I find inline styling difficult to change later on and is repeatable.


(Siddharth Prakash Singh) #6

I also use CSS modules. Only problem that I face with css modules is that I can’t inline above the fold css when I am doing server side rendering.


(peterm) #7

I inline my entire stylesheet. Perhaps it’s not the most optimal solution, but it’s fine as long as you don’t have a ton of CSS (in my case, a few kb’s). But then you lose the ability to cache CSS. But then you also don’t have to deal with fingerprinting filenames with each release of your app (although you should be fingerprinting your JS bundle anyways). Tradeoffs.


(Aliakakis) #8

CSS should not be mixed with JS. Conceptually they are different tech. Inline style also is a no no since it will mess with critical rendering path and css specificity. I have a separate folder and import css in my index.js file that mounts the app with webpack and then export it as a separate file.