WEB STANDARDS CREATIVITY

Strictly speaking, these class names might not be the most ideal. In general, try to avoid using class or ID values
that represent the way an element will be displayed to the user (such as red-link, big-headline, or even
ad-column-300). The main reason for avoiding these “presentational” names is that they’re not especially
future-proof: what happens when you redesign your site, and all of those red-link elements need to be
green? ad-layout-1 or ad-layout-2 might have been more abstract, and perhaps a bit better; however, we
decided that the production staff might better manage the more descriptive names, and the rest is history. Or
class names. Or something.
In effect, this gives our template a kind of toggle that we can exploit with our CSS. If we know that one of these two templates
will be applied to our body element, we can modify our style rules accordingly:
/*
Set the column offset on the content DIVs
*/
body.ad-column-180 #content-primary-wrap {
margin-right: -200px;
}
body.ad-column-180 #content-primary {
margin-right: 200px;
}
body.ad-column-300 #content-primary-wrap {
margin-right: -370px;
}
body.ad-column-300 #content-primary {
margin-right: 370px;
}
/*
Set the right-hand column width
*/
body.ad-column-180 #content-secondary {
width: 190px;
}
body.ad-column-300 #content-secondary {
width: 360px;
}
Here, we flesh out our original rules and prepare for the two separate column widths with the appropriate body.ad-column-180
and body.ad-column-300 selectors.
chapter 3 New York Magazine: My, What a Classy
63