meyerweb.com

At last week’s Web Design Meetup, a couple of people showed me their current projects. As is my wont, I glanced over the visual design and then started digging into the document markup. In the course of the resulting conversation, I pointed out some ways to tighten up the markup. I’ll repeat them here for those who are curious. All of them relate to using classes and IDs efficiently.

The first recommendation I had was to use classes and IDs in conjunction. Not everyone is aware that an element can carry both a class and an ID. Well, they can. So it’s no problem to have markup like this:

<div id="utilities" class="menu">

That way, you can style all menus consistently via the menu class, while having the utilities ID there for any ‘Utilities’-specific styling you need to do. This has always been possible, and it’s supported by multiple browsers. You don’t see it often, I admit, but then it’s not often needed.

The second recommendation was to use space-separated words in your class values. This is thoroughly legitimate, and can make things a lot more compact. So you might have something like:

<td class="subtotal negative">(-$422.72)</td>

You can then have one rule that styles all subtotals, and another than styles any negative number. For example:

.subtotal {font-weight: bold;}
.negative {color: red;}

By using these kinds of class values, you can avoid having to construct one class for subtotal, and another for subtotal-negative. If you’re doing that sort of thing, I can tell you right now that your CSS is larger and more complicated than it needs to be. Multiple-word class names also free you from having to do things like throw in extra spans or other elements just to add more information, like so:

<td class="subtotal"><span class="negative">(-$422.72)</span></td>

That kind of structure is almost never needed, except in extremely rare cases where you must have an inline element on which you hang some presentational styles that can’t be applied to the table cell. I can’t even think of a concrete example right now, but I’m sure there is one. In which case, I’d say do this instead:

<td class="subtotal negative"><span>(-$422.72)</span></td>

But, as I say, the odds of your having to do that are very very low.

All this leads to a third recommendation that came to mind as I looked over the markup. Remember to use document structure to your advantage, and not to class everything in sight. I can’t tell you how many times I’ve seen this kind of markup:

<div class="navlinks">
<a href="blah01" class="navlink">Blah01</a> |
<a href="blah02" class="navlink">Blah02</a> |
<a href="blah03" class="navlink">Blah03</a> |
<a href="blah04" class="navlink">Blah04</a> |
<a href="blah05" class="navlink">Blah05</a>
</div>

Out of the six classes that appear in that markup fragment, five are completely useless and simply bloat the page weight. Here’s a much more efficient way to structure the markup:

<div class="navlinks">
<a href="blah01">Blah01</a> |
<a href="blah02">Blah02</a> |
<a href="blah03">Blah03</a> |
<a href="blah04">Blah04</a> |
<a href="blah05">Blah05</a>
</div>

Now all you do to style the links is write a rule that uses the selector div.navlinks a instead of one that uses a.navlink. In addition to making the HTML weight smaller, it also makes the document cleaner and a whole lot easier to read. Your users don’t really care about that, of course, but I bet you will, if you ever have to go in and adjust either the markup or the content.

So there you go. Hopefully it was of some help to you.