Oftentimes I think people use different class names for different style-types, but when time comes to start styling, their CSS gets confusing. So for example, say I have a site with a couple of different sections and have several headers in each. Some of these headers will have a few similarities with each other, yet I’ll still want some in one section to look a little bit different than those in another section.

Some people would solve this with XHTML like the following:


<div id="header">
   <h1>My sweet site</h1>
   <h2>A description of why my site is so sweet</h2>
</div>
<div id="content">
   <h2 class="introthingy">My content</h2>
   <h2 class="title">bla</h2>
       <p>Lots of juicy content.</p>
   <h2 class="title">bla <strong>again</strong></h2>
       <p>Lots more juicy content.</p>
   <h2>a normal title.</h2>
       <p>Even more!</p>
</div>
<div id="secondary-content">
   <h2 class="introthingy>Introductions</h2>
        <p>Whatever.</p>
   <h2 class="title-alt">A somewhat similar,
   yet a little different, title</h2>
         <p>Yeah, what he said.</p>
   <h2 class="title-alt"><a href="#">some link
   in a header</a></h2>
         <p>Yeah, what he said (again).</p>
</div>

Now granted I really exaggerated there, but you get the point.

The problems begin

After I’m done coding all my XHTML, time comes to start with the CSS. So I start styling the stuff that will be the same for both types of headers (title and title-alt):


h2 {
/* the stuff you want on all your normal titles */
}

.title, .title-alt {
background: pink; /* go figure */
}

.title a, .title-alt a {
text-decoration: none;
border-bottom: 1px dotted black;
}

.title strong, .title-alt strong {
color: white;
}

/* etc, etc, etc */

After a while, this gets a little bit tiring. Now, we could give each title two classes and use one class to set the similarities and one class to set the differences. But this too is unnecessary–all we really need is one class:


<div id="header">
   <h1>My sweet site</h1>
   <h2>A description of why my site is so sweet</h2>
</div>
<div id="content">
   <h2 class="introthingy">My content</h2>
   <h2 class="title">bla</h2>
       <p>Lots of juicy content.</p>
   <h2 class="title">bla <strong>again</strong></h2>
       <p>Lots more juicy content.</p>
   <h2 class="title">bla again!</h2>
       <p>Even more!</p>
</div>
<div id="secondary-content">
   <h2 class="introthingy>Introductions</h2>
        <p>Whatever.</p>
   <h2 class="title">A somewhat similar,
   yet a little different, title</h2>
         <p>Yeah, what he said.</p>
   <h2 class="title"><a href="#">some link
   in a header</a></h2>
         <p>Yeah, what he said (again).</p>
</div>

Our CSS will become the following: 


h2 {
/* the stuff you want on all your normal titles */
}

.title {
background: pink; /* go figure */
}

.title a {
text-decoration: none;
border-bottom: 1px dotted black;
}

.title strong {
color: white;
}

/* etc, etc, etc */

And when you want some different styles depending on where the header is:


div#content .title {
font: 3em arial;
}

div#secondary-content .title {
font: 2em Georgia;
}

Nothing really complicated, and most of you no doubt already knew this could be done. However, I think it could probably be used a lot more often than it is, so just a friendly reminder from your neighborhood web developer: Keep things simple, it’s just easier to work with that way. swan