Use less (css preprocessor) server side or client side

Question

What are the pros/cons of using less server side vs client side in a live production environment? Why would i want to convert my less to static css and use that when going live instead? As i understand it the css is cached both server and client side so speed shouldn't be an issue and js not being available isnt an issue as my app is very dependent on javascript so if it is not available i would have bigger problems. I dont fully understand how the server side compilation works....thanks

Answer 1

I worked on a large project that used LESS. The main issue we ran into compiling it client-side (in development environments) is that since client-side compilation requires JavaScript and printing renders the page to paper without JavaScript enabled, so whenever anyone printed a page it would come out completely unstyled. Even if your application uses heavy amounts of JavaScript like ours, if you want to support printing you need to compile server-side or provide static CSS.

The solution that worked best for us was to run node.js to compile LESS server-side on the fly while in development environments, then pre-compile it out to a single gzipped css file when deploying the site to production.

Pre-compiling also reduces the number of individual file requests being made by the client from dozens per page in our case (one per each LESS file) to just single CSS file, and makes loading quicker by avoiding the compilation step (which client-side less.js has to run every single time a new page is navigated to before the page can begin rendering.)

I wouldn't recommend compiling it server-side on the fly in a live production environment, because that'll add a lot of unnecessary processor load. If you compile it in advance it'll consume no more server resources than a single ordinary CSS file.

Answer 2

The browser can only cache the data it receives from the server. This does not include the CSS compiled in the browser from less (HTML5 local storage mechanisms aside). This means that the browser would have to compile the less files to CSS each time they're loaded - even if the less file is loaded from browser cache instead of from the server.