Tools to Optimize (Remove Redundancy and Merge) CSS

Removing redundant CSS

Is there some elegant way to do this programmatically?

Not really. The order of rules matters and their precedence, so without the DOMs to which it is applied you can't say for sure which rules can be moved or combined. For some, it might be possible but for most of them, you need to see how they are applied.

If you take a look at this:

#test3 .test2 {
  border: 1px solid red;
  color: blue;
}

#test.test {
  border: 1px solid green;
  color: red;
}

#test3 .test2 {
  color: green;
}

<div id="test3">
  <div id="test" class="test test2">
    test
  </div>
</div>

Merge lo extend CSS selectors from different LESS files (bootstrap)

It is possible to force "consolidated" selector styles via mixins:

html    {.html()}

.html() {font-size: 16px}

body    {color: green}

.html() {color: red}

.html() {background-color: blue}

// etc.

Though usually this kind of theming is achieved via variables:

// base.less

@text-color: blue;

html {
    font-size: 16px;
    color:     @text-color;
}

// theme.less:

@text-color: yellow;

How to merge and clean 2 css files with overlapping selectors/properties?

There is This and This list of other helpful tools

How do I optimize my stylesheet by removing unmatched and/or unnecessary CSS selectors

There is a Firefox plugin called "Dust-Me Selectors".

https://addons.mozilla.org/en-US/firefox/addon/5392/

"It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered."

It's a fairly manual process but could be what you're looking for.

Is there an advanced CSS minifier/compiler that does things like strip redundancy and comma separate identical rules?

This can be done using CSSO.

Consider the following input:

input{margin:0}body{margin:0;background:white}

CSSO output:

input,body{margin:0}body{background:#fff}

(exactly what you are looking for)

~~But unfortunately, CSSO optimize this:~~

.dont-care {
    background-image: url("images/chart.png");
    background-repeat: no-repeat;
}

~~To:~~

.dont-care{background-image:url("images/chart.png");background-repeat:no-repeat}

~~However, CSSTidy converts the above to the corresponding shorthand property:~~

.dont-care {
    background:url("images/chart.png") no-repeat;
}

~~Seven~~ Four steps solution for optimizing CSS:
Here is the practice I follow:

Merge CSS files in all.css.
Supply to CSSO input.
Hit Minimize
Paste the output in all.min.css

Except paying @Grillz to get it done manually, I haven't found a better deal for CSS optimization thus far..

But what about old IE hacks?
If you are using CSS hacks for IE6 and 7, CSSO will preserve the hacks.

For example:

.dont-care {
    background-image: url("images/chart.png");
    *background-image: url("images/chart.jpg");
    background-repeat: no-repeat;
}

CSSO output:

.dont-care{background-image:url("images/chart.png");*background-image:url("images/chart.jpg");background-repeat:no-repeat}

~~CSSTidy will ignore asterik(* hack used for IE6), and output:~~

.dont-care {
    background:url("images/chart.jpg") no-repeat;
}

You can also avoid hacks and use separate CSS file for older IE versions (say all.oldIE.css). After optimizing (using 7 steps described earlier) both files separately, this is what you may use in the <head> tag of your HTML/masterpage/template/layout file eventually:

<!--[if lt IE 8]><link href="css/all.oldIE.min.css" rel="stylesheet" type="text/css"/><![endif]--> 
<!--[if gt IE 7]><!--><link href="css/all.min.css" rel="stylesheet" type="text/css"/><!--<![endif]-->

where all.min.css would work for all browsers except IE versions less than and equal to 7. But using CSSO alone is a safe bet.

Update

Skip the CSSTidy part. CSSO does safe optimization. According to their developer, shorthand optimization is not safe:

Consider that example:

.a{
    background-attachment: fixed;
}
.b {
    background-image: url("images/chart.png");
    background-repeat: no-repeat;
}

and if you'd have <div class="a b"></div> — an element with both
classes, you can't optimize the .b as you write, 'cause it would
override the background-attachment set in .a.

So, no, that's not a safe optimization.