I am a little familiar with the idea behind Gzip, thanks to this great video from Frédéric Kayser (in French), however there is a something I am still not sure about.
Basically, a string gets more and more compressed every time it is being repeated. And unless I'm wrong, the longer the string, the better.
Let's talk about Sass for a second. Please consider this mixin:
@mixin center($max-width) {
width: 100%;
max-width: $max-width;
margin: 0 auto;
}
The first line is static. The second line is dynamic since it depends on the $max-width
variable. The third line is static. Let's say we used it a couple of times, getting this CSS:
.abc {
width: 100%;
max-width: 1170px;
margin: 0 auto;
}
.def {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
Now, as far as I know, Gzip will be able to find those repeated patterns:
{
width: 100%;
max-width:
And:
;
margin: 0 auto;
}
Getting back to my question: would it be better to move the dynamic lines on top (or bottom, whatever) of the mixin to group static lines together and benefit from longer strings?
For instance something like:
@mixin center($max-width) {
width: 100%;
margin: 0 auto;
max-width: $max-width;
}
Let's be clear: I am perfectly aware this will make absolutely no difference whatsoever on the file weight. It's just out of curiosity. ;)
Tried with some added noise too. http://sassmeister.com/gist/be93d9cab3c157e4c2b0
Both 600 bytes compressed and both 252 bytes gzipped, no difference at all.