Eric Carlisle Eric Carlisle - 3 months ago 6x
CSS Question

CSS Preprocessors - Building CSS for every page load or just for a build process?

Just getting into the fun world of CSS preprocessors. Let's say we're using LESS to render our CSS. I'm wondering about two different approaches:

  • Using LESS to render the CSS on every page load.

  • Using LESS as part of the Build Process and just using the rendered CSS in production.

I'm wondering if there are times where you'd use one and not the other. On one hand you have dynamic CSS a runtime and the other static CSS build from a (hopefully) concise and clear LESS template.


This is an article written on CSS-Tricks from Chris Coyier

Chris says that it is possible, with LESS, to use an .less file using the link tag like you do with normal .css files

<link href="style.less">

Although this is one way to process the file, it is not the most efficient way to do it. It could severely slow down loading cases, and it could possibly crash the browser It would be better to use the LESS gem to convert the LESS into CSS. As Chris says,

The "pre" part of preprocessing you can think of as "before you send these files to the live website."

Here is a good article that explains the different ways you can process the .less files.

On the Client-Side compilation, the writer sums it up nicely

Rather than the Sass/LESS code being compiled once, it’s compiled on every single page request — and to make matters worse, you’re passing that burden off on your users, rather than doing it yourself

For your second point, that is essentially what CSS preprocessors were built for. They were made to have a manageable CSS script that is high in readability, and low in difficulty of change. Then, you don't even have to look at the CSS file. Just ship it off to the land of the browsers, where it will get torn apart anyway by browser specific renderings (cough, cough IE).