body is clearly going to take a while, since it contains all of the content on the page. I’ll be breaking it out into chunks. This first post will focus on how I use the
body tag itself.
I generally use the
It can also help with planning as these classifications can be used as part of the estimation process- “I’ve got 5 major templates and 10 variations, that’ll be 2 weeks of work.”
Here are some examples from the ongoing redesign of DrunkenFist.com. These might help to crystallize what I’m trying to do.
The home page is clearly going to have some very specific styling. It’s also a unique page, so I target it with just a simple id, “home.”
There aren’t different types of home pages on my site so I just use the
If you had a configurable site (themes/colors) or a site with different user states (logged in user/ guest) you could potentially capture that information in a class.
Movies Landing Page
<body id="text" class="movies">
A text heavy page (like a movie review) will have many specific styles, dealing with lists, paragraphs and headers. A movie-review might have specific CSS elements, like a credit box. This
body allows me to target both of those pieces.
<body id="text" class="about">
A text heavy page that might have special content or formatting.
Art Detail Page
<body id="detail" class="art">
A gallery detail page focused on an individual image (painting or drawing.) In this specific case there are several generic elements that are restyled based on the body
class. For one example, the content area is much larger to allow for bigger images. Same markup, but different look, all using this simple mechanism on the
Art Gallery Page
<body id="landing" class="art">
It’s a “landing” page (in the site in question a 3rd level page) focused on art. In this case there are plenty of styles needed to deal with thumbnails.
Featured Art Page
<body id="featured" class="art">
These 2nd level pages are all hand tweaked, so being able to target styles is very important. There are actually a few specific elements that don;t rely on the cascade on these pages, but the “featured”
id is still useful.
And there you have it. As you can see with a little planning you can set up a logical scheme for your body ids and classes which will help you both organize and plan your site out.
Next time out we’ll look at basic page structure and how to create a framework for a basic two column design.