YUI CSS Minification issues

Question

I have 2 css files which are minified and combined into one file. But the CSS property on the same element is not combined.

file1.css // this comes from a common library

body { position: relative; margin: auto; }

file2.css //this is a project specific style

body { position: static }

min.css

body{position: relative; margin: auto}
body{position:static}

I want position: static to take precedence on position: relative

Answer 1

It's not a bug, YUI Compressor does not merge CSS selectors.
It's a choice, and it has a reason.

Take this CSS as an example :

/* file1.css */
.foo {
  color: red;
}
.bar {
  color: blue;
}

/* file2.css */
.foo {
  color: yellow;
}

And this HTML:

<p class="foo bar">Hello world!</p>

Here's what we've got:

Without file combination

/* file1.css */
.foo{color:red;}.bar{color:blue;}

/* file2.css */
.foo{color:yellow;}

The color is YELLOW , because of the order of declarations.

With file combination, without merging selectors

/* file1.css */
.foo{color:red;}.bar{color:blue;}.foo{color:yellow;}

The color is YELLOW , same reasons.

With file combination and merging selectors

/* file1.css */
.foo{color:yellow;}.bar{color:blue;}

The color is BLUE , because our element has both selectors, and the yellow value has been moved during minification.

Answer 2

反转xml配置文件中css文件的顺序。