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

zessx · Accepted Answer · 2015-04-09T12:28:56.140

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.

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

The color is YELLOW, same reasons.

/* 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.

edited Apr 09 '15 at 12:28

answered Apr 09 '15 at 12:22

zessx

Does that mean, the last value of the css property selector gets applied and not the first (if we have same property specified at more than one place for the same element )? – Misam Apr 09 '15 at 12:34
They're all applied, but the last one override the first one. In your example, `static` already take precedence on `relative`, as it's declared later in your files. – zessx Apr 09 '15 at 12:37
But static does not take precedence in my case, its always relative, which is getting applied to the element – Misam Apr 09 '15 at 12:39
In this example, it's not static, for sure. – zessx Apr 09 '15 at 12:40
Correct ! It seems some one else was poking its nose in between, finally I had to declare the property at the end of the file and it worked. Thanks for the lucid explanation. – Misam Apr 09 '15 at 13:06

score 0 · Answer 2 · answered Apr 09 '15 at 11:34

0

Reverse the order of css files in your xml configuration file.

answered Apr 09 '15 at 11:34

Arpit Aggarwal

Which configuration file, do you mean the master page file of my web page ? – Misam Apr 09 '15 at 11:39
How you are minifying your css files, means where are you specifying the names of files to minify? – Arpit Aggarwal Apr 09 '15 at 11:42
I add that as part of pre-build events. I changed the order of my css files, property order did get changed in the minified file, but still 'position: relative' gets applied. – Misam Apr 09 '15 at 11:58
position: static !important ; will work, but it's not a good solution. You can try with adding additional css class with css property as position: static. – Arpit Aggarwal Apr 09 '15 at 12:04
@Arpit You misunderstood OP's question. The problem is not that `static` is applied instead of `relative` (this is normal, and the expected behavior), but that **both value are shown in the final minified CSS**. There should only have the last one, as they share the same selector. – zessx Apr 09 '15 at 12:14