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.
santosh
Good articles ?
Monday 22nd June 2009 | 06:22 PM Reply Comment URL Back to top