Posts from Sunday, July 18th, 2004

Competent Classing

Published 14 years, 4 months ago

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>

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>

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.

  • Published
  • Categorized under CSS
  • 45 responses so far

iLike iLife 4

Published 14 years, 4 months ago

Long-time readers may recall my ranting about iLife 4 being a for-money upgrade, which in the end was as much about my lack of understanding as it was about Apple’s (perceived) silence on the subject.  As it turns out, I never got around to buying iLife 4, so I was happy to have it bundled with my new PowerBook.  That’s right, folks, I spent over $2,000 on a laptop, but I saved $49 in the process!  Ph34r my l33t sh0pp1ng sk1llz!

So I imported my entire iPhoto library into iPhoto 4, which only took about 45 minutes.  In the process, I discovered that I actually have 4,080 photos so far.  There was some weirdness, in that iPhoto 4 claimed to have discovered 234 “lost” images.  Under half were duplicates, and the rest were completely blank files with the same names as photos I already had.  So I threw them all away, and landed at 4,080 pictures.  Once I figured out the keyword interface, which is by no means intuitive (or even very usable), I set about adding metadata to some of my images.  The first order of business, of course, was to tag all pictures of Carolyn and organize them into a smart album.  Guess how many pictures I’ve take of her so far?  We’ll have the answer in a moment, but first, here’s a recent one of her sitting up on her own, which she started doing a couple of weeks ago. A picture of Carolyn sitting up and reaching upward, an enormous smile upon her face.

Everything I’ve heard about the improved speed in iPhoto 4 proves to be correct, and possibly understated.  This thing screams.  It still generates bloated directories, though, given the number of XML files and image copies it’s capable of producing.  This is largely so that it can support a “Revert to Original” feature, so any time you take out red-eye or lighten up an image, you end up with both the original and the modified image on your hard drive.  The same happens if you do no more than rotate an image.

That’s where iPhoto Diet comes in so very handy.  It’s a small application that can get rid of all unnecessary duplicates in your iPhoto library, and it can also delete the originals of all rotated images.  It can also wipe out all the originals, replacing them with the modified versions.  I ran it on my library before I migrated to the new machine and reclaimed over half a gig of drive space.  And that was only getting rid of unnecessary and rotated duplicates, not all originals.  I did a lot of red-eye reductions, and those are still around.  I also have yet to run the “strip thumbnails” option, which could easily reclaim a few dozen megabytes.

I haven’t really played with the rest of the iLife suite since I don’t have a video camera or a garage band.  I may eventually burn some images to a DVD for relatives to play on their TVs.  If I can figure out how to use Garage Band, I might try creating some background tracks for use in radio production work.  It’s nice to know the options are there.

And the answer to today’s trivia question is: as of this writing, the smart album titled “The Compleat Carolyn” contains 1,832 pictures.  At this rate, we’ll have about three thousand pictures of her by her first birthday.