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.
I have used the Flumpcakes optimzer for quite a while and like it too much to change to CSS Tidy.
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?
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.
Thanks. I did not tick the “group styles” box.
Thanks. I did not check the “group styles” box.
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 ?
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.
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 {
}