Tuesday (05/23/06)
Conserving class names 1:16 pm
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. 
I eat food. I listen to music. I sleep. Sometimes. I drink lots of coffee. I make pretty pictures. I talk to people. I believe in things. I write stuff. I take photographs. I have a laughing addiction. I am human. 
You could also cut out the extra classes and just use a class for the first h2 (or none at all if they will all look the same within their respective divs):
and your CSS would become the following:
and the extras:
This should clean up the code a little bit and get rid of some of the classitis.
Hmm, yeah the XHTML above didn’t print right. It should include no classes at all.
Author’s note: Fixed. If you want to show HTML, you have to run it through something like Postable first. - Elliot
Good stuff, E. Even though I know not to over-crowd the class names, I still do it sometimes out of laziness. Your example shows how simple it can be.
@Brad: Yeah, I realize you could do something like that for this specific example (put a class on the first that over-rides the rest), but I was trying to illustrate a way to control multiple exceptions. So if you wanted everything with a title class to function differently than your normal h2s, but still wanted to have a little variation among those.
@Adam: Yeah, it’s really easy to go to down with that stuff. Sometimes I have to consciously force myself to think, “Do I really need this?”
By the way, I just edited some of the code in my post to make it a little bit more clear.
Elliot, this is completely irrevelant to the subject, but I love the design of your website.
Steven, the reboot was weeks ago, why are you saying this now?
I’m just now saying this because honestly, the first time I saw it, I hated it. But now, it’s kinda grown on me. It’s the little things, too. Like using the swan symbol to end all posts. Where did you get that swan anyway?
Don’t know what that does for you but anyway…
@Steven: Thanks.
Being the swan is my logo, it seemed like the natural choice. Originally, it came from a photograph that I drew over with the pen tool in photoshop.
Well here is where I’d probably use something like multiple classes to combine different bits of style contained in each class and add them together. Of course, this only works in some cases, but makes for a lot leaner code and less repetition. (which reminds me I need to optimize my css a little)
Multiple classes is another way to do it (as I mentioned), but if you can do it with just one class, why not?