Debugging Your CSS - Jump Start CSS - page 168

Here's how the top of our stylesheet might look after adding some random characters that
aren't valid CSS:
asdfjjlgkljd
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
Here's what's happening. Instead of disabling the entire stylesheet, the random characters dis-
able only the first rule set, which is the one using box-sizing . The reason only this first
rule set is disabled is because the browser is viewing that first line with the random characters
as a selector. So, what it does is read everything before the first curly brace, attempting to
identify the elements you're trying to target. Since it can't identify those characters as a val-
id selector or selector group—or as anything else that's valid in CSS—it proceeds to ignore
what's in that first declaration block.
Now look at this:
asdfjjlgkljd {}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.cf:before,
.cf:after {
content: " "; /* 1 */