DEV Community

Pacharapol Withayasakpunt
Pacharapol Withayasakpunt

Posted on

Which CSS pre-processor? Or just postcss?

Coming from Vite (pronounced /vit/), where it does allow SCSS/SASS, but it believed in future web standards.

I find this unintuitive.

a {
  & b {
    color: red;
  }
}
Enter fullscreen mode Exit fullscreen mode

So, does anyone actually use or prefer postcss? Or rather, what it your favorite compile-to-CSS (maybe, LESS, Stylus), and why?

Top comments (7)

Collapse
 
sargalias profile image
Spyros Argalias •

SCSS seems to be the most popular option. I highly recommend it. For all I know, other tools may be better, but I've never used them or noticed a job that required them instead of SCSS.

I also use PostCSS but only for one-time setup things like automatic addition of fallback properties and some other stuff. After that, PostCSS isn't something I actively work with. It just does stuff at compile time, not while I work. It complements SCSS in my opinion.

Nesting

The selector in the example feels a bit unintuitive to me as well. It can be re-written like this, which is perhaps a bit more intuitive:

a {
  b {
    color: red;
  }
}
Enter fullscreen mode Exit fullscreen mode

Personally, I prefer nesting a lot compared to standard CSS. It feels a lot cleaner to not repeat the first selector every time. It also works for BEM.

Other features

Other good features are:

  • variables (not as necessary now that CSS has custom properties)
  • logic things like loops and conditionals
  • partials
  • mixins and extends (basically the reverse of Tailwind's apply directive)

None of the features are necessary, but they can be very helpful. I use nesting 100% of the time. I use things like loops and mixins rarely, but I'm glad they're there when I need them.

So, if you like the features, use it, but you definitely don't have to.

Collapse
 
yeasin2002 profile image
Md Kawsar Islam Yeasin •

Thank you, It's really helpfull

Collapse
 
eliancodes profile image
Elian Van Cutsem •

I mostly tend to use PostCSS in combination with TailwindCSS @apply classes and Sass preprocessing. This gives me a very good way to write reusable components and don't clutter my markup

Collapse
 
tarek_mo profile image
tarek mo •

I don't know about many CSS extensions but SASS is giving me all I want. The features it provides are more than enough ^^''

Collapse
 
yeasin2002 profile image
Md Kawsar Islam Yeasin •

I Love postcss. cause almost everything gets here
also, postcss provides some plugging for optimizations
asl like purge-css and auto prefixer and so on

Collapse
 
pontakornth profile image
Pontakorn Paesaeng •

I actually prefer PostCSS with Tailwind (or WindiCSS alone). It saves me more keystrokes and increase my speed to develop something.

Collapse
 
vyckes profile image
Kevin Pennekamp •

I only use SCSS for generating classes and CSS custom properties based on variables defined in SCSS (e.g. an array of spacing values). After that, I basically write CSS.