.before.text1 {
    color: #000;
}
.before.text2 {
    color: #FFF;
}
.before.text3 {
    color: #000;
}

.before.text1 {
    color: #000;
}
.before.text2 {
    color: #FFF;
}
.before.text3 {
    color: #000;
}

.after1.text2 {
    color: #FFF;
}
.after1.text1, .after1.text3 {
    color: #000;
}

.after1.text2 {
    color: #FFF;
}
.after1.text1, .after1.text3 {
    color: #000;
}

.after2.text1, .after2.text3 {
    color: #000;
}
.after2.text2 {
    color: #FFF;
}

.after2.text1, .after2.text3 {
    color: #000;
}
.after2.text2 {
    color: #FFF;
}

Specificity Problem at CSS Minification

This is a small test page to demonstrate why I think one can't group multiple CSS rules into one as described in Introducing a new way to minify CSS.

On the left you see various text boxes. Each is styled with exactly the CSS which is written into it and has the class values as given. This HTML page is fully self contained. So don't bother to look at the source and judge what I write.

The first row of boxes is the reference. As they look, all following boxes should look. They carry the "before" style sheet. The next row carries the "after" (variant 1) and the third row the "after" (variant 2) style sheet. The "after" style sheets are those that a rule grouping CSS Minifier would produce. Both are wrong and there is no way to do the job right!

The problem is, that the CSS Minifier changed the order of the color: #000 and the color: #FFF property. But this order is important. Sadly all the rules have the same specificity. So the order comes into play. Before the Minification white overwrites black for the left column so do black for white at the right column. (Please note the different class names in both columns.) After the Minification either black overwrites white or the other way around. There is simply no right place in the style sheet to place the black rule.

So at the end you can't move, add or remove a rule in a style sheet which has any properties in common with other rules of the same specificity. So it might be possible to group some rules, but viewer as you think.

Alexander Kiel, 2008

Back to my Homepage.