Ask HN: Do i really need a css preprocessor?

Having used both SASS and LESS professionally, I&#x27;ll say that it&#x27;s easy to end up with an over-engineered mess that&#x27;s difficult to maintain and reason about.<p>That said, the tooling around both preprocessors is great, so it shouldn&#x27;t be a huge burden to set it up. Because they&#x27;re supersets of standard CSS, I don&#x27;t see a reason why you wouldn&#x27;t use one. Use the features you like, ditch the ones you don&#x27;t.

Yes, and no.<p>Yes they can really help you organize larger projects easily. With variables, you only have to write things once. If you change your &quot;black&quot; from #000 to #1a1a1a, for example, that&#x27;s one change instead of dozens. Nesting is another useful feature that helps you separate one page&#x2F;module from another, and keep everything contained. Mixins and functions are super-useful if you find yourself re-writing the same stuff over and over. Also, the preprocesing itself is a great way to &quot;lint&quot; your styles (in a surface-level way). If there&#x27;s a syntax error, the preprocessor will just fail, exposing an issue that might have gone unnoticed if you were using plain css.<p>But no, they don&#x27;t help you write the most efficient CSS. So if performance is your goal, you can probably write better&#x2F;faster CSS if you target each element manually, rather than letting the preprocessor target based on your nesting.<p>And no, they don&#x27;t help you alleviate cross-browser issues; that&#x27;s what auto-prefixers and shims are for. Those are different tools, also useful.<p>And no, they don&#x27;t help you keep your css tiny, that&#x27;s what a concatenators, minifiers, and utilities like &quot;UnCss&quot; are for. Also great tools, but separate ones.<p>If you want to get all the benefits you can, your CSS build tool will need to include many different phases. Preprocessing is only one phase; but may be an important one, depending on what you&#x27;re looking for.<p>Also,if you want to get started, just rename your .css to .less or .scss instead, and preprocess it. Both less and scss are supersets of css, (so all valid css is also valid less and scss). You can write vanilla css inside a less file with no issues. That way, if the urge strikes you to experiment with the features of the preprocessor, you can do so immediately.

That depends: do you use JS frameworks that require a compilation step? If yes, then adding a step in there to compile your SASS or LESS code is easy and has big advantages.<p>If you&#x27;re using PHP or Python and don&#x27;t use a JS framework that requires compilation, then adding in tooling just for a css preprocessor might be more work than it&#x27;s worth. In that case, it might be more advantageous to use whatever language you&#x27;re using to generate css the same way you use it to generate html.

It depends on the type of work you do. If you are putting together a handful of pages and only plan on spending a few hours writing CSS then probably no need for preprocessor.<p>On the other hand, if you&#x27;re a front end developer or you find yourself working on CSS multiple times a week then you should absolutely use a preprocessor.<p>There are tradeoffs between the two approaches, but preprocessors do save you time so the added complexity can be worth it the more you work on styling.

Vanilla CSS is verbose, not DRY, and challenging to navigate and maintain.<p>You don&#x27;t NEED a preprocessor. But as you find yourself writing larger CSS codebases or trying to do more sophisticated things with it, you may find yourself wishing for the features you get from a preprocessor.

You can get some Sass&#x2F;LESS benefit using PostCSS with CSSNext plugin. CSSNext will give you ability to use future CSS syntax now. If you want to go further, there is even a PostCSS plugin precss that can replace Sass&#x2F;LESS. I just use CSSNext + autoprefixer + cssnano.