I've been using plain css for my React stuff so far but I do miss a lot of the syntactic sugar Sass allows, like nested selectors, BEM extrapolation, colour utilities etc. What is the norm for people these days when it comes to CSS and React? is css-in-js very popular at all?
Styled-components has been a godsend, especially in apps that I'm working on with others.
You really don't need nested selectors in most cases, since you're rarely thinking about the page context when dealing with a single react component.
Styled components does namespacing for you and it's easy to share styles, colors, etc. across components for reusability (a la mix-ins) and portability via the props abstraction.
I'm going to echo styled-components being a godsend.
I've built a ton of front-end applications, both pre- and post-react. I've tried a ton of implementations of CSS, including just using PostCSS. After all my time investigating the best way to approach CSS, I think style-components is the best solution to use with React.
styled-components is what got me to switch from LESS to css-in-js, and I'm so grateful. Anyone interested learning about css-in-js for the first time would benefit from understanding the styled-components model, but there's already churn in that category, and new libraries inspired by styled-components that take it further. Here's an interesting perspective on the history of CSS-in-JS:
5 generations to make something that is less efficient (slow build times, caching not always possible) that straight up css processors. Its kinda sad really (but hey my css is in my js file now, so useful).
Given that I, as a n00b, find JS – hell, even React – way simpler to master than CSS, that wouldn’t surprise me at all.
I don’t mean the syntax, of course. The syntax is trivially simple. Translating that to something that looks good and is laid out just as you want, oh boy.
CSS is by far the element of front-end development that I’m enjoying the least.
I'm happily using SASS with React. If you're using webpack it's very easy to integrate (just add the SASS loader on top of the CSS loader and you can `import styles from './styles.scss'` in your JS files. Optionally, you can also integrate with the CSS modules option from the CSS loader.
I think CSS in JS is moderately popular. But I would hazard a guess that there are still at least as many people using SASS.
