Popular posts

I don't use any preprocessors in my own code, so I'm being pretty objective when I'm listing out the advantages here. Consider the case of animation where, whether it's due to necessary vendor prefixes you end up with a lot of duplicate rules, or in the case of repeated rules with small changes that could be expressed as loops, but you're looking at the flat result.

In both of those cases if your purpose for writing the code is teaching somebody the patterns they need present, it's a lot simpler to look at the base pattern written for a preprocessor that supports automatic prefixing, as well as something simple like a loop, than it is to scan over the flat results (no matter the line count) of CSS that would need to exist to support those patterns and ideas in actual browsers.

It's pretty common when teaching concepts and ideas to use pseudo-code, in the case of CSS preprocessors, the pseudo-code you're teaching with can be functional. Ana Tudor uses Sass as a teaching tool to teach animation this way.

In that regard the 'code' in your codebase is the shorthand, pseudo-code-like preprocessor dialect, rather than the code it may expand out to. When you're building a product you have to think about the generated code, but sometimes the codebase you're maintaining or working on exists primarily in the preprocessor form, and usually those are shorter rather than longer.

I do laugh a little bit when somebody uses a preprocessor and the end result ends up being much shorter and simpler CSS - there are definitely cases where it's overkill, limits your expressive ability, and it is really easy to generate lots of unnecessary code (in an amount that would take too long to do by hand by accident), but I think there are a lot of different applications for writing it, and not all even end up in a browser. What about writing examples for a book about CSS animation, surely the more succinct expression (preprocessor) would be preferred to the long form CSS.

As for JS-powered styling 😎 You might be talking to the wrong guy about that one! :D I'm 100% in favour of CSS, and I love writing my CSS as vanilla CSS from scratch. Writing just what I need, and nothing more… but if I genuinely need to do something beyond what CSS can do by itself, I'd rather extend CSS using another supported web standard language (JavaScript) than use a non-standard technology.

Lately I've been doing a lot of experiments with JS-in-CSS, and this month I'm experimenting (for the first time) with preprocessing, but I'll be consuming both an HTML file and a CSS stylesheet that contains custom 'container queries', and it outputs HTML + vanilla CSS (using CSS media queries). The output is CSS you'd never want to figure out, or write by hand. The calculations are something the machine can interpret and apply to your HTML and CSS very simply, but would be a massive headache for a human to try to figure out. (Perhaps too complex!)

Every day from December 1st -> December 25th I'm posting about a CSS plugin or technique that goes beyond what CSS normally does in some way, the thread starts here: twitter.com/innovati/status/936605657888935936 and today's was all about interpolating JS in CSS stylesheets <3