ptg16476052The Role of CSS in Web Design 43715
In what way is that box red? Well, it probably was red in some prior incarnation of the
style rules, but not now.
When you list your rules in your style sheet, do them in a sensible order. Generally
speaking, it’s best to start with the body rules first and then proceed down from there, but
because the cascade order matters only in case of conflict, it’s not strictly necessary to
mirror the page hierarchy. What’s more important is that you are able to locate the rules
that apply to a given selector and to discern which styles should be applied.
An example of bad style sheet organization is shown in Listing 15.6. This is part of the
style sheet from a high-quality website but with the rules in a scrambled order. How hard
is it for you to figure out what is going on here?
LISTING 15.6 A Randomly Organized Style Sheet
#sidebar0 .section, #sidebar1 .section { font-size: smaller;
border: 0px solid lime; text-transform: lowercase;
margin-bottom: 1em; }
gnav a:link, #nav a:visited, #footer a:link, #footer
a:visited { text-decoration: none; color: #CCCCCC; }
#nav .section, #nav .shead, #nav .sitem, #nav h1 { display:
inline; }
#sidebar1 { position: absolute; right: 2em; top: 3em;
width: 9em; } a:link { color: #DD8800; text-decoration: none; }
#main { } a:hover { color: lime; }
#nav .shead, #nav .sitem { padding-left: 1em; padding-right:
1em; }
#nav { position: fixed; top: 0px; left: 0px; padding-top:
3px; padding-bottom: 3px; background-color: #333333; color:
white; width: 100%; text-align: center; text-transform:
lowercase; }
#nav .section { font-size: 90%; } #layout { padding: 1em; }
body { background-color: white; color: #333333; font-family:
Verdana, sans-serif; margin: 0; padding: 0; }
#nav h1 { font-size: 1em; background-color: #333333; color:
white; } a:visited { color: #CC8866; text-decoration: none; }
#nav { border-bottom: 1px solid lime; } #main { margin-left:
11.5em; margin-right: 11.5em; border: 0px solid lime;
margin-bottom: 1.5em; margin-top: 1.5em; }
#nav a:hover, #footer a:hover { color: lime; }
#sidebar0 { position: absolute; left: 2em; top: 3em;
width: 9em; text-align: right; }
If that was hard to follow, don’t feel bad; the difficulty was intentional. CSS rules are
easily obfuscated if you’re not careful. Most style sheets grow organically as piecemeal
additions are made; discipline is necessary to keep the style sheet readable.