CSS pre-processors like Sass or Less become essential in larger projects that have a lot of nuanced design. That or very careful load-on-demand segregation of stylesheet files, which involves a substantially more sophisticated build process.1

I recently converted a web project that had more than 6,000 lines of CSS to Less. Granted the resulting Less is not as beautiful as it would have been had it been originally built in it, but I’m slowing refactoring various aspects as I go along. Iterative improvement is wonderful.

Thus far the most intriguing aspect of the work-in-progress refactor was that I was able to reduce the project’s 40-color palette to just 15 colors, thanks to the forced organization that comes with Less variables. Creating variables out of each color forced me to come to grips with the fact I had gradually created very similar variations of the same colors; these various shades needed to be consolidated. The result is that the web pages look more unified and cohesive. It’s subtle but noticeable. Doing this color consolidation in pure CSS would have been technologically feasible but much slower and less fun, which means I wouldn’t have done it.

Pure CSS is too primitive without a pre-compiler. I’m never going back to it.

  1. Well of course and then there’s VueJS, where you put your styling right in the same file as your HTML and JavaScript for a given component. Sounds messy but Vue is actually decent about it. ↩︎