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?

Discussion (9)

Collapse
jfbrennan profile image
Jordan Brennan

Stopped using Less and SCSS a couple years ago. Haven’t missed them at all. Good patterns, leveraging native CSS features (like custom properties) to the max, and a little PostCSS plus CCS Optimize results in 100% standards-based code and the smallest styles bundle.

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
mdkawsarislam2002 profile image
Md Kawsar Islam Yeasin

Thank you, It's really helpfull

Collapse
elianvancutsem 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
mdkawsarislam2002 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
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
pontakornth profile image
pontakornth

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

Collapse
kevtiq 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.