Have you ever had a super freakish problem with the Liferay CSS Not doing what you expected? I mean I love Liferay's new Minifier, it's fast and efficient. But, it's no fun when you have problems.
Suppose you have some css:
.something-a .something-b,
.something-c .something-d,
.ie6 .something-e {
... do this ...
}
.something-g {
... do that ...
}
Looks innocent enough, right?
NOPE!
It's not innocent! Inside there lies a develish beast that is waiting to bite your earlobes off. But really he's supposed to be your friend... he just needs to be handled with certain amount of firmness, tough love so to speak. You have to set and keep some rules. Otherwise, he'll misbehave.
He'll reduce the above css on a non-ie6 browser to this:.something-a .something-b,
.something-c .something-d,
.something-g {
... do that ...
}
which is NOT what you wanted at all, am I right?
Rule #57 of Liferay Theme Design is: Never, ever, ever mix browser css selectors with non-browser selector css definitions! Always break them out like this:
.something-a .something-b,
.something-c .something-d { ... do this ...
}
.ie6 .something-e {
... do this ...
}
.something-g {
... do that ...
}
There, now you have laid down the law! Mr. Minifier will handle your css appropriately.


