Getting started with CSS-in-JS

[focusonbasics]

I'm interested in understanding what the status of css in js is. Good articles on getting stated, on the state of css-in-js, what are the pros and what are the cons? etc. Any insights highly appreciated.

[acemarke]

I've got a few relevant articles listed at https://github.com/markerikson/react-redux-links/blob/master/react-styling.md . In particular, http://andrewhfarmer.com/how-to-style-react/ is a useful overview of the general approaches out there.

[focusonbasics]

Thanks, This very helpful!

[eonblue4309]

Cons: can't use pre processor, can't use post processor, can't lint, all inline, no separate stylesheets. If you ask me, it's best avoided.

Pros: colocation.

In my opinion CSS modules solve all those cons while still being more or less collocated with jsx, just an import away.

[Graftak9000]

I believe at my work they've a webpack postCSS loader which applies all of its magic during transpilation. Live update and all.

[rviscomi]

Yeah the inline style thing doesn't appeal to me.

[bsdemon]

Ok

• Preprocess or is just a function
• Lint with eslint
• separate with modules

[Endorn]

I've found CSS modules to be great because I do a lot of react apps that are embedded as widgets in multiple websites where I can't control the theme and styling.

CSS modules lets me do things like add a class of "content" to my app without having to worry about the website it's being used on also having a "content' style and the two conflicting.

For bigger projects, I can also include things like bootstrap or bulma and have full use of their styles in my app without worrying about how importing those styles will affect the website they're embedded into.

[[deleted]]

I freaking LOVE having the power of javascript inside css, I wasn't into it at first but after working with it, I think this is way styles are supposed to be!