Comment by Vishwa Bhat on "How to use Sass along with React? Should I use post-processor(e.g: PostCSS) instead of pre-processor like Sass?"

Both PostCSS and SASS are different in what they serve.

PostCSS helps you after you write the CSS by filling the gaps like eliminating global namespace conflicts, making your CSS compatibile with other popular browsers, slight performance improvements etc. This process happens during build time using JS plugins, you'd not have control during dev time.

On the other hand, SASS helps you while you write the CSS by providing a programming like interface where you can have variables, can compute basic math inside CSS using loops and conditions, color manipulations, reusable CSS snippets etc which finally compiles to pure CSS. This really helps in code readability and dev productivity.

I have seen many people using both PostCSS and any of the pre-processors like SASS or Less or Stylus, regardless of the framework. React+Sass works perfectly fine, it used to be my fav combo untill I came across Styled Components(CSS in JS).

Share that screenshot here, we can probably fix that.

Cheers!

Yes! Sass will help us to create Nesting, functions, mixins, variable etc. I have used Sass for normal project I was planning to use along with my new react project. same time I have seen something good at Styled components and everyone is recommending. What are some benefits of using Styled Components?

Styled Components is one of the favours that follows CSS in JS or JSS approach where you write CSS as a JSON like structure inside JS file. Its highly opinionated. Some people hate it and some people love it, there's no in between and surprisingly both are right in their owm ways.

There's a story behind why it came to picture (here is the link: speakerdeck.com/vjeux/react-css-in-js). There are several variants which follows JSS like Aphrodite, Radium, Styled Components, Glamorous etc. with each of them having their own pros and cons.

Here's an article that explains more about it: hackernoon.com/all-you-need-to-know-about-css-in-…

Have fun! Cheers!

I guess pseudo elements not supported in CSS in JS. But t one of the huge benefit of this, it can avoid render blocking CSS for better performance. Or is there any other way to sort out that?

Almost all of them support Pseudo Classes.

Here's the comparision:

github.com/MicheleBertoli/css-in-js/blob/master/R…

Thanks Vishwa. for your information.

Search Hashnode