Online CSS DRYer (dedupe)

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?

@RegEdit, wrote an answer to your previously deleted question if you want to check it out: http://stackoverflow.com/questions/15195750/minify-compress-css-with-regex — Qtax, Mar 04 '13 at 07:01

score 2 · Accepted Answer · answered Mar 03 '13 at 03:41

2

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

answered Mar 03 '13 at 03:41

Niet the Dark Absol

320,036
81
464
592

I may have spoken too soon. Is it Win only or is their a Mac or online version? – RegEdit Mar 03 '13 at 04:01
It is available as an executable for Windows, Linux or OSX, but what got me hooked was the fact that it's available as PHP, so I could implement it directly into my "devloper console" system. – Niet the Dark Absol Mar 03 '13 at 04:03
Nice. I just found the PHP files. Playing with it now. Just can't get the copy to clipboard to work but other than that, looks very promising. – RegEdit Mar 03 '13 at 04:22
Mangles my @media queries, but I can fix them. – RegEdit Mar 03 '13 at 04:52
Found an online version here > http://www.cleancss.com/ – RegEdit Mar 03 '13 at 04:59

score 1 · Answer 2 · answered Mar 03 '13 at 07:43

1

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

answered Mar 03 '13 at 07:43

steveax

17,527
6
44
59

Online CSS DRYer (dedupe)

2 Answers2