dreadedmonkeygod . net

Digg pointed to this CSS Tutorial. It's a wonderful tutorial. Just about the cleanest, clearest CSS tutorial I've ever seen. Really great stuff. But they've fallen into the old trap of badly-named examples:

.greenboldtext{
  font-size: small;
  color: #008080;
  font-weight: bold;
}

Now, the author did include a disclaimer:

The reason I named it "greenboldtext" is for example purposes, you can name it whatever you want. Though I do encourage you to use selector names that are descriptive.

No mention of semantic markup, even implicitly. No hint that naming classes based on how they look is a bad habit.

So, to put my money where my mouth is, here's my version:

Let's say you want to have links to other sites look different from links within your site. Classes are perfect for this. Define two classes:

.externallink {
  background: #ffa000;
}

.internallink {
  background: #33aa33;
}

Now, when you have a link to somewhere else, you use the .externallink class:

<a class="externallink" href="http://www.google.com">Google</a>

And when you have a link to another page on your own website, you use the .internallink class:

<a class="internallink" href="resume.html">my resume</a>

The rule of thumb is: Use classes to label what something is, not how it looks. Giving classes names like "greenboldtext" or "reditallics" is a bad habit to get into. Names like "externallink" work no matter what you want the link to look like, but names like "orangebackground" don't make much sense when you deside to use a purple underline instead.

Okay. A tech writer I'm not. But it works well as a proof of concept, eh?

What makes the example more of a mystery is that CSS classes are used really well within the tutorial itself. View the source of the pages, and you'll find great semantic markup throughout. I understand simplifying for the sake of example, but in this case, I fear they may be giving novice web designers a bad habit that'll stick with them for years, and make their life harder in the process.

Variable names matter, kids, even in turorials and classroom examples.

I've also emailed the author of the tutorial to offer my suggestion. I don't know whether that makes me "that guy" or not. I mean well, anyway.