Andy Clarke‘s recently released, Transcending CSS, has an interesting bit on naming conventions (the labels designers give to elements). Though the subject is not new, it will no doubt be revisited more in the future as designers continue to focus on semantic coding.

A while back, Andy, along with the aid of Eric Meyer, peeked under the CSS skirts of 40 well known designer websites to see if they could reveal a common trend to naming elements. Unsurprisingly, the results showed that most of the element names used were commonly the same or very similar. Nevertheless, because there is no set format for naming elements, there will always be variations between designer’s stylesheets. For example, some like to use “container” for an all inclusive div while others opt for “wrap,” “wrapper,” etc.

So why does it matter? Well, it doesn’t hurt to use unique titles but the benefits of consistent naming conventions are well worth considering:

  • Save time for yourself by not having to wonder what each element should be named.
  • The ability to reuse stylesheets (at least the basic structure) from one project to the next.
  • Quickly edit completed websites from the past without having to decipher what the names mean.
  • Save time for others who may be working on the same website. Logical, meaningful names will make it easier to recognize the parts of a website and reduce the amount of mistakes caused by confusing labels.

Andy touches on the idea of further naming images to correspond with appropriate sections on the page, such as a simple_man.jpg might become branding.jpg to match the “branding” div. I would take it one step further and pose the idea of creating a naming convention for folders as well. Images should go in “images,” Javascript in “js,” etc. This would allow for easier referencing and better management. For example, If Douglas Bowman and Dave Shea decided to swap designs again like they did on April Fool’s Day in 2004, it would be easier if both of their image folders were the same name (rather than “i” and “img”). Furthermore, all branding, content, footer, and other main sections of a webpage could have their own image folders within the main image folder (i.e. /images/branding/branding.jpg).

For more reading on naming conventions: