Overridden properties and structure minification

[kizu]

This is something that can be done sometimes and something that is totally safe.

When there is some selector with some properties somewhere, then those properties can be used somewhere before with any values, so it could be used to merge selectors in some cases.

Here is an example:

.class1,
.class2 {
    width: 10px;
    height: 10px;
}

.class3 {
    width: 10px;
}

.class4 {
    width: 20px;
}

.class3 {
    height: 20px;
}

In that case we can't merge two .class3 rules, 'cause there is .class4 between them. But! we can safely move the first .class3 selector to the first rule, even while it have set height — because later it's height is overridden anyway.

So, in ideal case, that could be minified to .class1,.class2,.class3{width:10px;height:10px}.class4{width:20px}.class3{height:20px}.

[krnlde]

+1

But why not

.class1,.class2{width:10px;height:10px}.class4{width:20px}.class3{height:20px}

[kizu]

You've lost width:10px for .class3 here.

[krnlde]

Yes, because it's overridden by 20px. Am I missing something?

[kizu]

No, in initial styles there is nothing overridden — there is a width:10px in the first block and height:20px in the second. width and height.