Saving Bandwidth with CSSTidy
My CSS files get verbose over time. CSS is just not a great language or else, I’m not very good at it. Anyhow, I found out about CSSTidy which is a nifty tool to optimize your CSS files. There is also an online version. CSS optimization is a cool topic and it might get to be quite a challenge as selectors become more complex.
However, given the following test:
montant {
color: red;
font-weight: bold;
background:white;
font-style: normal;
text-align: center;
}
nom {
color: white;
background:white;
font-style: normal;
text-align: left;
}
texte {
color: black;
text-align: center;
font-style: normal;
background:white;
text-align: left;
}
CSSTidy failed to rewrite it in the obvious way:
montant {
color: red;
font-weight: bold;
text-align: center;
}
nom {
color: white;
text-align: left;
}
texte {
color: black;
text-align: left;
}
montant, nom, texte {
background: white;
font-style: normal;
}
Before you rush out and try to implement your own CSS optimizer, notice that the Flumpcakes CSS Optimizer found the right solution.
Follow me on twitter!
I have used the Flumpcakes optimzer for quite a while and like it too much to change to CSS Tidy.
Comment by Lucas Gonze — 2/2/2006 @ 13:15
Your example is wrong, as nom has a background colour of black. Therfore, CSSTidy and Flumpcake produce identical results.
Even after correcting your error, both produce the same output - still not the same as your manual solution.
Or am I missing something?
Comment by Matt Sephton — 14/2/2006 @ 6:55
Matt: The solution I give, minus the mistake you point out, is exactly what Flumpcake gives me. Of course, you’ve got to turn all Flumpcake optimization on.
Comment by Daniel Lemire — 14/2/2006 @ 9:19
Thanks. I did not tick the “group styles” box.
Comment by Matt Sephton — 14/2/2006 @ 9:31
Thanks. I did not check the “group styles” box.
Comment by Matt Sephton — 14/2/2006 @ 9:38
Shouldn’t the last generated paragraph should be first ?
montant, nom, texte {
background: white;
font-style: normal;
}
For example if later on need to make nom’s background red how do I do it ? How is the inheritance applied here, isn’t it defined by the order of the defined classes ?
Comment by MC Moisei — 27/2/2006 @ 13:41
One thing about optimizers, if the css file is pretty big after optimizing it it may be difficult to read it especially if you use the “group styles” option.
Comment by MC Moisei — 27/2/2006 @ 13:48
No,
A,B,C {
}
is the same as
C,B,A {
}
There is no inheritance here…
You are getting mixed up with
A B C {
}
which is *not* the same as
C B A {
}
Comment by Daniel Lemire — 27/2/2006 @ 14:10