CollyLogic: Establishing a Common Vocabulary

Establishing a Common Vocabulary

30th May 2004

Malarkey has posted a fine article looking at current trends in naming conventions within our CSS and markup. Malarkey has looked at forty popular sites (including this one) to identify similarities and in turn suggest some sensible names for common elements. Having recently been discussing with him the idea of several designers applying their own CSS to some core markup for a future project, common naming conventions seem to make even more sense.

Malarkey makes a number of sensible cases for using such standard names, for the benefit of both users and developers. It’s too early to suggest we all adopt his suggested names at this stage, for I’m sure as a community we can tighten or further scrutinise these conventions. To steal directly from Malarkey’s article, here are the suggestions he makes:

Main elements

Container div: container

Header or banner div: header

Main or global navigation div: main-nav

Left or right side columns: sidebar-a, sidebar-b

Content div: content

Footer div: footer

And for other page elements

Sub-navigation list: sub-nav

Search: search

Search results: search-results

Copyright information: copyright

It’s clear there is a great case for standardising naming conventions here, and why shouldn’t the core names we use be as important as the CSS elements themselves? Adopting these methods can only encourage new developers to get under the skin of existing designs and quickly learn to code semantically. Encouragingly, Malarkey’s conventions table does show plenty of correlation, with names such as header, sidebar and navigation already foremost in the designer’s vocabulary.

I’m keen to help tighten these naming conventions between us as a community, and then implement them on this site and all future projects. At this point we need to encourage discussion and suggestions relating to these conventions, and quickly establish a standard vocabulary we can all feel comfortable with.

Simon Collison published this on 30/05/04, at 7:29 AM

Comments

Good stuff here Mr Collison. To stick my penneth in, I agree that naming conventions are generally most useful when they refer to a content type rather than a style or position. Most of the above suggestions fit this although, pedantic semantics may suggest that ‘header’ and ‘footer’ both suggest position.

The benefits are multiple and obvious, especially on a project where multiple people will be working on or re-using a common structure and code.

Perhaps a couple of downsides exist though. Firstly, a rigid structure like this firmly encourages the pure two/three column layouts that are becoming so familiar (I know, I know, it’s ‘cos they work well!) and secondly, it doesn’t take into account the hacks/work-arounds that CSS-based design often requires.

For example, in trying to build a flexible set of containers for building numerous different newspaper-style layouts (multi-nested-columns) I’m resorting to some naming that indicates the position, size number of columns etc in an attempt to keep things remotely understandable. Still, the content-centric conventions can also be used within this structure too!

29/05 at 08:49 from Simon Snorkeller

Yes, it’s probably correct to establish a heirarchy - content names, position names, style names, where content names are most applicable. I don’t think this approach would be too restrictive, and it wouldn’t be a crime to break these ‘rules’, but if working collaboratively, it’d be a right boon.

I know for a fact that I’ll still do daft names like collybanner3 and pleasework etc in certain areas of a page, but hopefully contained within sensibly named divs…

29/05 at 08:58 from Simon Collison

they’d certainly be sensible for collaborative projects, or scripts released on public licence (guestbooks, forums, etc), but I’m reticent to see them imposed in any way on general site design.

The main cause of semantically incorrect websites is wysiwyg web design software - which teaches bad habits. Unfortunately it is also a wonderfully easy way for people to get into web design and development. Definitely a double-edged sword.

Now, if someone created wysiwyg web design software which encouraged semantic design (and that could indeed use these naming conventions until the individual was skilled enough to hand code) then life would be truly wonderful.

29/05 at 10:19 from the lazarus corporation

Note that comments are disabled 30 days after articles are published, or sooner if spammers target a particular post. Sorry...

Commenting is not available in this section entry.