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:
Thanks for posting this. “Human-readable” labels are really important for long-term maintenance and reducing total cost of (site) ownership.
It goes to all levels. For instance, image files should be named according to some scheme, so they are grouped in the file listing. Ex:
ftr-bkg.jpg
hdr-about-left.jpg
hdr-buynow.jpg
about-topphoto.jpg
etc.
Folders or files with date-specific info should be sorted correctly in the file list:
2006-01-25-Client
2006-01-25a-Client
(I use the full “2006″ for clarity, though “06″ would work.)
All this sounds trivial (“Just sort the file list by date, dummy!”) but it turns out that two years down the road, it saves a lot of time and headache and makes you more productive.
Comment by Michael J. — January 25, 2007 @ 8:22 am
Thanks for the input, Mike. Adding to what you said, this would be great for icon sets (or other large batches of similar images) where the icon names start with “icon-” or something similar. Much better than searching for user.gif, post.gif, link.gif, magnifier.gif, etc.
Comment by Adrian — January 25, 2007 @ 11:24 am
Nice post. This doesn’t just apply to web design. As I go through my business classes and my senior capstone I find that I will use effective names for all the charts, graphs and inputs I have to use, and there are many, so that I can remember what they are and what they stand for without having to look through pages and pages of books and notes. This is an invaluable asset when you are working with anything that requires more than one name.
Comment by Jason — January 25, 2007 @ 7:52 pm