DEV Community

loading...

Which CSS pre-processor? Or just postcss?

patarapolw profile image Pacharapol Withayasakpunt ・1 min read

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

pic
Editor guide
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
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
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
3in0 profile image
3in0

I get a lot of value from SCSS mixins and functions but like you I find nested selectors unintuitive. I guess the good thing about a preprocessor is that you can choose to use as much or as little as you find value in.

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

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.