HTML and CSS Reference
In-Depth Information
Listing 15-17. The Correct Element Selector
body {
font-family: Verdana, Arial, sans-serif;
font-size: 1.2em;
color: #351801;
In other words, the second and third rulesets of the original example are not needed and should be deleted.
Note such identical, redundant rules are much more difficult to notice in long CSS files where there are hundreds of
other rulesets between them. That's why it is important to think the major CSS rules over at the very beginning and
later override those rules only where inherited values are not appropriate for the overall design and layout.
Because the previous ruleset has two properties that can be written with a shorthand property, the code can be
optimized further (Listing 15-18).
Listing 15-18. The Correct Solution
body {
font: 1.2em Verdana, Arial, sans-serif;
color: #351801;
Descendant selectors (also known as contextual selectors [4]) should be used for optimum code length. Examine
the markup shown in Listing 15-19 and CSS rules in Listing 15-20.
Listing 15-19. Standard-Compliant but Nonoptimal Markup (Classitis)
<div id="main">
<p class="maintext">The is the main content of the site.</p>
<p class="maintext">The second paragraph should look like the first one.</p>
<p class="maintext">In fact, all paragraphs of the document have the same styles.</p>
Listing 15-20. Standard-Compliant but Nonoptimal Styling Rules
.maintext {
margin-left: 15px;
margin-right: 15px;
margin-top: 10px;
margin-bottom: 5px;
font-size: 1.4em;
color: #1d4c90;
Although both the markup and the style rules are presented in a standard form, the code is far from optimal.
This kind of class overuse is called classitis [5]. A much shorter, easier to understand, optimal solution could be the
markup presented in Listing 15-21 with the CSS rules shown in Listing 15-22.
Search WWH ::

Custom Search