Most Common Errors - Web Standards: Mastering HTML5, CSS3, and XML - page 468

Nonexisting or Incorrectly Used Property Values
To avoid errors caused by incorrect CSS property values, the allowed values as well as the associated data types
should be known. Additionally, it is very useful to know the initial (default) value. For example, one of the three attribute
values, collapse , separate , or inherit , can be set for the border-collapse property used to set whether table
borders are collapsed into a single border or rendered next to or above each other. The ruleset border-collapse:
yes; cannot be used, because the attribute value yes would be illegal. Since this is an inheritable property, a
corresponding ruleset is needed only if the inherited value is not appropriate for our purposes and needs to be
overridden (or ensured).
Ignored Inheritance
Redundancy often occurs in badly written CSS. Although such style sheets might even be standard-compliant, they
are longer than necessary, use more bandwidth, and are harder to maintain. Code optimality can be achieved only if
inheritance is considered properly. Assume the style rulesets presented in Listing 15-15.
Listing 15-15. Redundant Rulesets (Should Be Optimized)
body {
font-family: Verdana, Arial, sans-serif;
font-size: 1.2em;
color: #351801;
}
p {
font-family: Verdana, Arial, sans-serif;
font-size: 1.2em;
color: #351801;
}
div {
font-family: Verdana, Arial, sans-serif;
font-size: 1.2em;
color: #351801;
}
The previous rules are obviously redundant. Some developers would write them in the form shown in Listing 15-16.
Listing 15-16. A Better Yet Still Redundant Solution
body, p, div {
font-family: Verdana, Arial, sans-serif;
font-size: 1.2em;
color: #351801;
}
Since browsers apply the same styles for the child elements ( p and div in this example) as defined for the parent
element ( body ), the code is still redundant and should be written as shown in Listing 15-17.