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.

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

You may subscribe to this blog by email.