CSS selectors merging

[GoalSmashers]

Raised by @XhmikosR

Another thing I was wondering, would it be very hard for clean-css to merge the selectors when they are the same? For example:

foo { font: Sans-serif; }
foo { font-weight: bold; }

can become:

foo {
    font: Sans-serif;
    font-weight: bold;
}

[XhmikosR]

@GoalSmashers: Thanks, for opening a new issue for this; I should have done it myself already.

The selectors merging can be improved even further when it's possible to use the shorthand notation like in this case:

border-color: blue;
border-style: inset;
border-width: 1px;

can be

border: 1px inset blue;

EDIT: Refs #134.

[GoalSmashers]

That could be even more tricky than selectors merging!
But thanks for raising it.

On Nov 18, 2012, at 10:07 AM, XhmikosR wrote:

@GoalSmashers: Thanks, for opening a new issue for this; I should have done it myself already.

The selectors merging can be even further improved when it's possible to use the shorthand notation like in this case:

border-color: blue;
border-style: inset;
border-width: 1px;

can be

border: 1px inset blue;
—
Reply to this email directly or view it on GitHub.

[thezoggy]

https://github.com/css/csso
you can see how they do their merging: https://github.com/css/csso/blob/master/lib/compressor.js

[GoalSmashers]

Thanks @thezoggy. They go CSS parsing way whereas clean-css does all via RegExp replacements. And that's a totally different story.

[thezoggy]

pretty impressive all the things it can do if you look at their test examples.. wonder if that approach makes sense or if there is a lexical top down approach (cant recall the proper term) that would be much more flexible and extensible. at least the color safe optimizations is worth referencing :).

[GoalSmashers]

It is much more powerful method but at the price of being much slower (by factor of 10), as it requires much more computational effort to build a parsed tree.

If we get to the point of building selectors merging I am sure it would be a quite different approach.

Thanks for pointing out more safe color optimizations!

[XhmikosR]

In my opinion, this should be a higher priority. Many times it's much easier to specify a specific property instead of extending the current one. So the example from my first comment is very common. And this approach would really offer much greater compression.

I hope you can reconsider this. :)

[GoalSmashers]

Not before 1.0 as there are more important things than this.

I wonder if it'd provide more than ~1% improvement in size though.

[XhmikosR]

Well, you shouldn't have in mind well organized css files...

[CatmanIX]

I would also suggest merging selectors with the same properties + values. Such as:

a {margin: 3px}
div {margin: 3px}

should become

a, div {margin: 3px}

I know from testing myself, after already using clean-css on some of my projects and then using CSStidy just to merge selectors in this fashion, i can get 40-50% size improvements. I'd say it's well worth the time to try implementing this.

[GoalSmashers]

Thanks @CatmanIX! Once we get into attributes merging we'll definitely take a look into selectors merging too.

[justinmarsan]

Keep in mind that when a selector becomes too long, IE8 will ignore it (issue i'm running I'm having right now with compass-generated sprites) in which case doing the opposite (splitting long aggregated selectors) would actually help. Maybe a safe mode or something like that.

[GoalSmashers]

Thanks for pointing that out. At first it will for sure be an optional feature.

[GoalSmashers]

Fixed in 1459d7f
Follow up in #134