Hacker News Reader

Comment by have_faith | Hacker News Reader

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?

View on HN

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:

https://github.com/streamich/freestyler/blob/master/docs/en/...

Currently i'm working with Emotion (https://github.com/emotion-js/emotion) and enjoying it

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).

Yes, notice the trend: web develeoper > Javascript developer > React developer. Soon we'll have CSS developer as a career in itself.

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.

PostCSS is probably the standard. Many plugins to get all the same stuff as sass, but faster and cleaner.

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.

Everyone quotes “the standard” as what they do. CSS is probably the one area where there is no consistency in how it is handled in React.

Reply on news.ycombinator.com