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.

Published by

Daniel Lemire

A computer science professor at the University of Quebec (TELUQ).

8 thoughts on “Saving Bandwidth with CSSTidy”

  1. 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?

  2. 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 ?

  3. 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.

Leave a Reply

Your email address will not be published. The comment form expects plain text. If you need to format your text, you can use HTML elements such strong, blockquote, cite, code and em. For formatting code as HTML automatically, I recommend tohtml.com.

You may subscribe to this blog by email.