LESS/SASS CSS opposite from minification/optimizations?

Question

i wonder can i say that LESS/SASS CSS "pre-processors(i think they are called?)" is the opposite from optimizations like minification? i wonder if there will be any noticeable performance impact? or do you think easy of development is more important?

i ask this because what LESS CSS generates is something like

body #div1 #div2 p
body #div1 #div2 p a:link, body #div1 #div2 p a:visited
...

and i think it can really bloat up my css quite abit. as you can see, such specificity is not required and it makes reading css hard (at least what i see in firebug).

Answer 1

You'd be surprised, but gzipped CSS files that have repeated blocks of code shouldn't be too much larger than ones with the shorter selectors.

This is thanks to how the compression algorithm handles duplicate strings in a file. Instead of including the same string twice, it replaces the second occurrence with a reference to the first one, and so that string only appears in the compressed file once. Take a look at how repetitive the selectors in your generated CSS file are - this should make them compress fairly well.

Naturally, the key to this is making sure your CSS files are gzipped - leaving them uncompressed will definitely increase the file size.

Answer 2

Depending on the options, SASS can give output in different styles. For production, you will want to set the output style to 'compact'.

Answer 3

In Sass you can control 'specificity bloat' by understanding how nesting works. You don't have to do any nesting at all if you don't want - it's something you can control.

Using the new @extend directive, you can actually reduce redundancy in your CSS by applying the priciples of OOCSS and can thus improve performance. Here's a good article to get you started with @extend. And a few more OOCSS resources:

• http://www.stubbornella.org/content/category/general/geek/css/oocss-css-geek-general/
• http://wiki.github.com/stubbornella/oocss/faq
• http://oocss.org/

The great advantage of @extend in Sass is that it takes the manual effort involved in applying OOCSS and makes it wonderfully painless and easy.

Finally, as Andrea pointed out, Sass has a variety of options for minifying CSS (see the :compressed style), so overall you've actually got a pretty potent toolkit for not only improving your performance as a developer, but also improving the performance of your CSS. For an example of this in action, see how Chris Eppstein, author of Compass and core contributor of Sass, refactors the Digg stylesheet down from 125 lines of code to 85 lines of code (a 32% reduction).