Use structural naming conventions
Written June 21, 2009. 13 comments.
How much thought have you ever put into what you name your classes and ID’s? If you’re like me, your probably guilty at one time or another of assigning a name to a div that describes where it is or what it looks like.
While doing this isn’t detrimental to your site, it’s better practice to use a naming convention that describes the structure, not the appearance or position.
Here’s a typical example of using a naming convention that describes the appearance and position.
It looks innocent enough, but why is it no good? For starters, what if you wanted to swap things around with CSS? Let’s say you wanted to move right_div to the other side, suddenly left_div will be in the right position.
Using another example, let’s say you have a block of text on your page that is large and blue, like the intro text of this article. I could have easily used a class called big_blue_text, but what if I changed my mind about the colour or size later, and made it smaller and green?
The purpose of using a good naming convention is so you have the flexibility to control the layout of your page using CSS without having to change the HTML for things to make sense.
Sticking to a consistent naming convention also means you’ll have an easier time editing your site in the future, and if you’re in a team environment then it means the other guy won’t be confused. Working on someone else’s code can be difficult enough without trying to figure out why top_red_text is actually green and appears in the middle of the page.
What’s the best way then?
As mentioned earlier you should use a naming convention that describes the structure. Here’s an example.
Some will argue that header and footer are still presentational descriptors, and that might be true. But given the field we are in, header and footer are long established and universally accepted as representing the top (header) and the lower (footer), so there should be no confusion behind their meaning.
But if you’re not convinced of that, you could always try:
Likewise for other elements that require a class or ID. Using the blue text I have at the start of my article as an example again, the class for that is called intro, as opposed to something like big_blue_text.
An easy way to keep you on track with good naming conventions is to simply ask yourself “what is this element intended for?” Not, “where is this element going?” or “what does it look like?”.
Easy peasy lemon squeezy.
Start of pageWho is That Web Guy?
Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, and currently head of the web dev unit at Stormbox, a branding and creative communications agency located in Perth, Western Australia.
While we’re at it, it would be good to hear more about using relevant semantics and markup (something you may have touched upon in other articles) as well – for instance, when it is appropriate to use an H1, a BLOCKQUOTE, a UL element and so on… and why it matters. Just a thought.
Tough with class you can name a whole bunch of objects like class=”external_link”.. and when you do a CSS, it will apply to a whole class.
ID’s can only be used once on any given web document because they are used to describe a unique element to separate/construct your mark-up. You couldn’t for example have 2 divs called “primary_content”.
ID’s can be manipulated with JavaScript as well, so they need to be unique. Another example, the login slider on this site is in a div called “login_form” which slides open when activated by a menu button. If I had 2 divs with the same ID, then the JavaScript will be manipulating both of them which I don’t want to happen.
A class can be used as many times as you like on any page as they are considered members of a group – hence “class” like “classroom”.
Hope my feeble explanation helped.
Thanks for this.
Naming is important indeed, even more so in webprogramming.
Maybe off-topic, but is there a good reason why CSS files are written 1-statement per line?
I have tried putting all the declarations on 1 line per id or class and then a 4 page CSS-file suddenly becomes readable without even scrolling.
Probably it’s just by convention..
What’s wrong with scrolling :D