View http://friggeri.net/blog/a-genetic-approach-to-css-compression/
This is a pretty fascinating, in-depth look at the idea of approaching CSS compression in the mindset of genetics. This guy is way smarter than me and some of these equations are way over my head, but reading this article called out another reason preprocessors (Sass, LESS) can be tremendously useful.
One thing I used to do all the time was sweat about how many times I was repeating a certain set of properties and values for CSS selectors. The repetition drove me nuts because every time I’d do it it’s more bits that need to be pushed through the pipe. When you think about that you quickly realize that there’s not much you can do before the CSS itself becomes a plate of spaghetti. Completely incoherent with no consistently or logic for that matter.
You can get a glimpse of that if you’ve ever used @extend in Sass. It’s a magical little aspect of Sass that allows you to extend a set of rules that’s already been set. The idea is to have one selector inherit the styles of another, but tweak it just slightly, using the source as a base. If you check out what Sass outputs, you’ll notice that the selectors with which you’ve used @extend are grouped in ways you didn’t write, but make the best use of CSS concerning space. If you tried to do that by hand using native CSS you’d quickly drive yourself completely mad.
There’s a fine line between the code we’re writing and what actually needs to make it to the browser. I think preprocessors could take things even further some time down the line and get the absolutely optimal stylesheet with the minimum number of characters (and therefore least weight) based on us following some established conventions when writing it. Then we could be completely verbose when we’re doing our part, but the resulting asset is as abstracted as possible so as to be the most machine-friendly. Best of both worlds?