How to assign names to DIVs – CSS identifiers (Classes & IDs)

Choosing the right name to assign to DIVs (IDs names, classes names as selectors) seems to be at first sight nothing serious to think about, but when you advance and the website is done you might get a little confused because of the DIV’s names. And first of all I am thinking of HTML/CSS debugging.

If we have to count the common rules we can say that a DIV name may start with a letter (aA–zZ), a dash (-) and of course with an underscore (_) and then be immediately followed by a letter, or underscore, and after that may have any number of letters, dashes, underscores or numbers.

Although there is no rule for giving PROPER names (names that are respecting anyway the CSS grammar) to IDs and Classes it might be useful for you to take a look at the following rules I am respecting when is coming to giving names to CSS DIVs (IDs and Classes). Hint – the order doesn’t really matter.

1. Use general names. E.g. instead of using #homeContent you’ll use #content. If for whatever reason you’ll want to use the same ID but with some changes on another page you can add the name of the page as a suffix, e.g. #contentAbout.

2. If there is a need for two words name, capitalize the second word first letter. Will help in readability. E.g. instead of #bigbanner you’ll use #bigBanner. I am doing this even for pictures and it works just fine.

3. Keep it short. E.g. instead of .highlightsBlueBoxContent you’ll use only .blueBox. Clearly, there is no reason to make long names so stay away from it.

4. No “left” / “right”, “up”/”down” or even worst “first”/”second” etc. Why not? What if you want to use the same style you defined for .leftColumn to the column in the right, and so on? You will have either to have the same DIV name for the right column (same .leftColumn, whaat??) or to use the same style but create a new class (more code). Both alternatives are wrong, isn’t? Or, what if you want to use p.second twice on the page, or even more? Obviously will sound odd to have p.second for more than one paragraph on the same page!

5. Use “shortcuts” for long names. Two “shortcuts” I am using all the time are: bkgd / bkgr (for background) and txt (for text – is saving one letter only but I like it). E.g. #noBkgr and .contentTxt.

6. Get used of using of #header, #sidebar, #footer. Is already a kind of general rule to have these names used in a CSS file and is helping a lot identifying easy of the essential areas of the page.

7. Last but not least, try to use words instead of letter/numbers combination. E.g instead of using .pvtswt you’ll use .whateverOneSimpleWord. Using simple, easy to pronounce/remember name will help you to communicate easy with your colleagues or bosses when is about to discuss (especially over the phone!) about CSS changes. Misinterpretation is not welcomed.

As I said from the beginning, these are the rules I follow in a daily manner. It’s up to you to follow these rules or not. Use it at your convenience. After all is just a matter of personal preferences how you assign names to CSS IDs and Classes.

I’ll expand this list as I’ll go along.

Tags : , , ,

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

4 Comments

Leave Comment