Q) 'If You Were to Introduce a CSS Preprocessor?' A) 'I'd Go with PostCSS' ~ Rough Comparison of PostCSS, Stylus, Sass, Less
When I asked a frontend engineer colleague “What would be good if we were to introduce a CSS Preprocessor now?”, they answered “PostCSS, I think”, so I’ll share a rough comparison of PostCSS, Stylus, Sass, and Less.
By the way, this was a conversation from a certain day in June 2017.
PostCSS is, roughly speaking, a tool for transforming CSS with JavaScript. It’s positioned similarly to JavaScript’s Babel.
While it can’t do much on its own, you can use desired features by installing plugins, so being able to select and install only necessary plugins appeals to experts.
Unlike all-in-one CSS preprocessors like Sass or Stylus mentioned later, if you’re thinking “I just want to install something all-inclusive so I don’t have to write raw CSS,” you’d probably be better off using Sass or Stylus.
Also, compared to Sass, there are considerably fewer Japanese samples, so it might be good to check that when introducing it. There were 64 PostCSS-related posts on Qiita.
Companies and services using PostCSS include Facebook, GitHub, Google, and in Japan, Qiita has introduced it.
Since there’s a solid track record of adoption, it seems safe to use.
Since our company uses Stylus, when I asked “How about Stylus?”, the opinion was that they wouldn’t use it if introducing something new now.
Also, since there are few Japanese sample codes online, considering that engineers not well-versed in frontend would be working with it, it’s not very recommendable.
Indeed, there were 84 Stylus-related posts on Qiita. That’s considerably fewer compared to Sass, which I’ll introduce next.
The consensus was that Sass would be good to introduce if there’s no designer or engineer well-versed in frontend.
It’s all-in-one and there’s plenty of Japanese information on the internet, so if you run into any problems, you’d probably be able to solve most things on your own.
There were 543 Sass-related posts on Qiita. That’s an overwhelming number.
The view is that it wouldn’t be too late to migrate to PostCSS when frontend skills improve or when a lead frontend engineer joins.
Compared to Sass or Stylus, it can do less and there’s almost no reason to adopt it.
The temperature is about “If there’s someone good with Less, it might be okay to introduce it.”
There were 101 Less-related posts on Qiita.
We discussed this under the assumption that no other CSS Preprocessors exist in the world.
That’s my personal view on what would be good to introduce.
That’s all from the Gemba.