Sass (scss), PostCSS or plain CSS for a component library using React?
As the title says, how should I handle CSS? Is there a really bad reason using just plain CSS for a component library?
I want to go plain CSS as much as I can and right off the bat, I can't think of a really bad reason to just use plain CSS.
6 Replies
Most of the benefits of CSS pre-processors like SASS are now part of CSS, and in a lot of cases (like CSS variables) better than what the pre-processor provides!
Honestly in 2025 you’d need a really specific use case to use a pre-processor over vanilla CSS, IMO
im on the side that a preprocessor still has big advantages in terms of writting less code and having the code properly organized
however, with react, i can see some of that being less useful
Code generation is one of theose specific use cases I referred to, yes. And I can totally see using a (post?) processor to bundle a bunch of CSS files into one (as the default CSS import is a blocking function)
and auto-prefixing
while mostly not needed, there are some things that are still behind a prefix, or behind a different name or have a different syntax
for example, depending on how old the system you want to support is, you may be required to use
& in nested css, as per the old spec
and if you go a bit older, you can forget about nested css at all
and the "ok" colors too, which fixed a few "bugs" in the color algorithmsWith the limited scope that React components gives, a pre-processor would be way overkill. Also not sure if/how SASS would interact with a React component anyway
probably will be as smooth as 1-grit sandpaper
which is why people use ... tailwind 🤢