Online CSS DRYer (dedupe) [closed]

Question

DRY = "Dont Repeat Yourself".

I have a base css framework in which I use to build more complex designs. The quickest method of prototyping is just to start at the end and build up the css to get the desired results (rather than editing the existing css properties from the base css).

However, after I'm done, there is lots of repetition of classnames and properties.

I'm looking for an online (or offline) tool that will scan my css file and intelligently remake it in a form that removes redundancy and duplication.

For example, if these two lines exist in a CSS file:

//FROM THE BASE CSS
.header{
    font-weight:bold;
    font-size:1.5em;
    background:red;
    margin:0 auto;
    padding:20px
    }

//FROM THE ADDED CSS
.header{
    font-weight:normal;
    font-size:1.25em;
    background:blue;
    padding-bottom:0;
    margin-top:-20px
    }

The desired result (giving the lower item in the cascade as priority over the former) would be to remove the first instance of the .header directive and merge the rules from both .header instances into one .header directive like so:

.header{
    font-weight:normal;
    font-size:1.25em;
    background:blue;
    margin:-20px auto 0 auto;
    padding:20px 20px 0 20px
    }

Does such an application exist?

Answer 1

Personally, I use CSSTidy for this. It does lots of things, but among others it merges selectors where possible and cascades correctly (removing duplicate properties). I usually get around 30% reduction in the original file size too, which is neat, and even when minified it's still reasonably easy to read (unlike JavaScript minifiers).

Answer 2

There are a number of tools to help with this, here's two I find handy:

1. CSSTrashman
2. deadweight