Making OOCSS More Semantic


It’s been about three years since I first learned of Nicole Sullivan’s new CSS framework philosophy called Object-Oriented CSS, and I’ve finally started to give it a go on some of my personal projects. In particular, I’m trying out grids, which is probably the biggest benefit the system has to offer.

One of the catches for me, however, has been the out-of-the-box naming conventions for the column classes. Descriptive names like 1of5, 2of7, and 3of3 indicate the number of columns spanned out of the total number of columns available. Thus, 2of5 means “use up two-fifths of the remaining available.” However, descriptive names such as these are considered bad form because the flexibility of the web can re-arrange boxes on the fly.

In a narrow screen layout (iPhone, yeah?), all of these names may suddenly become deceptively incorrect. 3of5, 4of5, and 5of5 will probably all end up spanning a single column, rendering these class names meaningless.

Is this a big deal? In the short term, probably not; in the long term, maybe. Of course, in my last article, I wrote a long piece determining the difference between <object> and <embed> (in HTML5), so this kind of semantic challenge is right up my alley. I googled around to see if anyone had prior art and didn’t find any, so I figured I’d give it my best shot.

My names are based on a pretty simple grid structure, without a lot of fancy overlapping, and without a huge number of columns. It’s pretty easy to come up with good class names for a seven-column grid, but if you’re going for The Onion’s 16-column grid, or if you’re mixing the number of columns together, you might be stretching your imagination a bit more.

So, as implied, for my latest layout, I decided on a seven-column grid because I feel that odd-numbered grids are more interesting. (I’ve played with a nine-column grid, too, which feels pretty good.)

I started by planning my basic layout. The bulk of the content, I decided, would take up five columns. The sidebar would be two columns, and a single column would generally not be wide enough to fit significant content.

The single column unit was named beat. I thought this word was appropriate because of its flexibility: a beat could be a rhythm, like counting up to seven. It could be a patrol, like a police officer keeping watch over the layout, making sure everything was in order. Or it could be like a brief pause in a play; after all, a single column will likely not have important content, so it only needs to be lingered on briefly before moving on.

The bulky five-column box I called prime, because in most cases the prime content would be here. In a simple seven-column layout, a five to two balance is visually pleasing and lends itself to obvious hierarchy. When columns get stacked upon one another in a hypothetical mobile layout, the prime content is still prime. It’s semantically sound!

Likewise, the two-column block ended up being called sidebar, because it would primarily be used for... a sidebar. This was perhaps the least wise decision out of all of them, because it’s more likely that a double-sized column could be used for multiple applications besides just being a sidebar, and then we’re back to phase 1. Perhaps supplement might be a better term.

The last easy one was the seven-of-seven column, a.k.a. the full page width. I called it wedge. Everything in a wedge will wedge in between all content blocks above and below; it always creates a new row.

The rest of the column sizes had less relevance, so I just browsed a thesaurus and picked out terms that felt right:

  • A triple column is an insert, like those cards that always fall out of magazines.
  • A four-column section is a parcel, like a parcel of land.
  • A six-column section is a segment. I just thought segment felt right when paired up with a beat. Judge me if ye will.

So far, I feel a bit more comfortable with names like these than the descriptive alternatives. There are two big downsides to a naming system like this:

  • Recalling the system; if you’re switching between several designs with similar column names, but a different number of columns, it may get muddy in your brain. Some column names, like beat and wedge are universal enough that they can always be used to describe the minimum and maximum number of columns.
  • Keeping it simple; if you start inserting three-column layouts inside your seven-column layout, and then a one-column layout inside the three columns (see: the AG Test), things are going to get complicated fast.

For now, these are problems to tackle after a bit more practice.


No comments allowed at this time. Read my commenting policy.

← Older Newer →