Semantic CSS class names and ID's

For the past few years, I’ve been building up a set of class names and ID’s to my library that are semantic and reusable.

As websites are made up of web pages, and pages are made up - mostly - of text, websites have taken on many of the semantic names assigned to books, magazines, newspapers and documents. Tag names like “header”, “footer,” “blockquote”, etc. WordPress has followed suit, with content labels like “excerpt”, etc.

This is my rationale for some of my class-name choices, and - accordingly - I use a list of class names like:

  • excerpt - for excerpts of text from articles or pages
  • callout - for text callouts
  • strapline - for the company’s/website’s slogan (I also use slogan)
  • earpiece - for an ad or box either side of the masthead / page (only recently started using this)
  • banner - obvious
  • featured - for any element, be it an image or an article, that is featured
  • column - for any div or paragraph that is a column

The list goes on…

Then there’s a list of class names I used that are perhaps more “reusable” than they are “semantic”. For example:

  • group - given to the containing (parent) block of floated (children) elements
  • button - for any link or submit input that is styled to look like a button
  • alt - for any alternating element or alternate style</li>
  • first and last - for the first element and last element (usually children) in a group

Again, the list goes on…

But what about some layouts or elements that don’t fit into the magazine layout names? Take a look at SquareSpace.com’s homepage, for example. What would the jargon / technical name be for content lead-ins on a homepage? E.G. Three columns of say 300px wide each, that show a snippet from a section of the site - the “Social Integration”, “iPhone & iPad”, and “Blog Importing” links/snippets as a reference?

Squarespace.com has 9 of these ‘things’ on their homepage, that help you find the info you’re after…

In journalism, the parent / collective name for this is a “flatplan” - A one-page plan with boxes representing all the pages of the magazine. Each box has a short description of the content of the page. Used to plan the order of the content.

What would you guys call this?

Some suggestions from friends have been to use: excerpt, snippet, preview, trailer and abstract (like a book abstract).

Does anyone else battle with naming some layout elements like this??

Any comments and feedback would be appreciated.

Thanks
Jon

I’m also trying to develop a set of standards and naming conventions, as we’re in the throws of hiring help, and whoever comes on board needs to be able to mark it up like I do.

You’ll want a wiki styleguide thing. A single place where any of your current and future coworkers can go see which name is appropriate… then they’re only bugging you when it’s ambiguous enough that maybe a new name is necessary.

As an army of one, it’s nice to be able to get advice from brothers in the field elsewhere…
and sistahs amen.

Stomme, thank you for the thoughtful reply. As an army of one, it’s nice to be able to get advice from brothers in the field elsewhere…

I’m delivering full-on sites to partners in Australia and clients in the US. I’m also handing over HTML and CSS armatures for developers with proprietary CMS’s. So, yeah, I have to bear in mind that someone else will need to read my code and be able to change it down the line.

I’m also trying to develop a set of standards and naming conventions, as we’re in the throws of hiring help, and whoever comes on board needs to be able to mark it up like I do.

I think, ultimately, it’s going to come down to personal choice.

Again, thanks for your feedback.

I usually have quite a bit of trouble, partially because I don’t recognise even half of the newspaper terms you’ve used above. I wasn’t raised in print or design, so I don’t tend to use those terms.

So I often tend to make up a word that reflects either one of two things:

-what kind of content is in it

-why I’m giving the things a token (id or class)

The second one can get me in trouble because sometimes the only reason someone is getting a token is because some manager wants it blue, for no reason, and if the type of content inside isn’t the same every time, then I’ll just go ahead and use a name that reminds me when I’m reading it:
#bluebox (if someone wants it to become a green box, I will go ahead and do the headache of changing its name… this is why presentational names suck. But I’ll also charge for the time, unless they can actually give me a reason for the box being blue… usually, they can’t, because there is none)
#Dennis (I actually had a popup for a manager and I just named it after him. Nobody else wanted it, and when he left it was removed, because everyone but he knows popups suck and users hate them)

Sometimes I get in trouble where I find a decent name for something and give it a style, but later I need that exact same style and don’t want to end up with a list of “semantic” names who all have exactly the same styles for completely different reasons.

So I once had a front page with a three-box layout (typical of three-step-conversion type pages):
<div class=“choice”>
<div>blurb and choice here</div>
<div>blurb and another choice here</div>
<div>blurb and third choice here</div>
</div>
So I had something like
.choice {
width: 80%;
text-align: center;
}
.choice div {
display: inline-block;
width: 32%;
blah blah…
}

this was fine and made sense. However someone later decided the contact page would have the same thing going on visually. The contact page wasn’t made up of three choices, just three columns with different types of contacty things in it.

Later yet another page got the same treatment. I didn’t want
.choice, .contactoptions, .typesofcoverage… etc {
width: 80%;
text-align: center;
}
.choice div, .contactoptions div, .typesofcoverage div… etc {
display: inline-block;

I found that a lot of silly silly for what ended up basically being classes used purely for layout. That’s not a whole lot better than #bluebox, really.

In this case if a rewrite was in order I’d consider a NON-semantic name, a name explaining the existence of the class in the first place, which here was “make three boxes sit side-by-side”, nothing more.

If you do stick with semantic or content-based names, the pro is if you have to change the layout, you don’t have to change the names to remain sane (as you would with #bluebox above). However unless you’re refactoring your HTML too, you’ll end up with a bunch of elements who have tokens on them that aren’t used anywhere. This is no penalty on the browser, and the “extra” bytes the user downloads is negligable, but makes your HTML look like garbage, which is the first step to unreadability.

Frankly, if I’m completely changing a layout, I’m usually doing it because there has been a change in content anyway, so the Zen Garden Ideal doesn’t apply to me anyway. I’m making new tokens and removing old ones usually to match the new content or the new structure, and since I’m not working with a bunch of other developers I choose names that I will recognise and know what they are while reading my CSS and Javascript, even months later. Whether that’s #bluebox or .choices has less relevance than my puritan inner-nazi would like.

In any case,

What would you guys call this?

It looks like a list of features of the product: why you would use it, what it can do for you, etc.

I think whenever you can’t find a structural word for something, you can find a content word, so long as someone doesn’t come along later and say they want that same “look” for completely different content. Heck, I’d prolly make that ul and call it #featureList or .featureList.

I certainly wouldn’t use the .wrapper270Three they used. Yeah, #bluebox is retarded and I’ve used such a thing, but .wrapper270Three is worse, esp since #bluebox is a sort of last-ditch-attempt when everything else is exhausted…

<ul class=“featureList”>
<li>
social integration…
</li>
<li>Squarespace iOS blah blah</li>
etc…
</ul>

would do the job and probably wouldn’t even need ANY other tokens on anything. There are headers in there, which you can style .featureList h2, the image-links are the first children of the box meaning first-child if necessary… and if they’d written their HTML properly they would have had p’s after the h2’s and those could have also been so styles (.featureList p).

This site looks like it’s using one of those funkily-named grid thingies. They don’t need to, but I suppose if you choose this kind of thing, you’re kinda stuck with the .wrapper270Three-type silly names.