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.
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.
Hi, what about div’s names shortcuts :
1) Can we improve performances by using “ct” instead of “content” ? Is there a limit to cut a name ? ie: At a first reading, I understand “content” but not “ct”. In other hand, with “ct” we have less html and css (file weight).
2) Have you list most popular div’s names shorcuts ? If most of developpers uses same shorcuts, maybe it’s a good practice.
Efusien, is just a matter of personal preferences the way you name DIVs. But, yes, there are a couple of names you will find pretty much in any style sheet like: #header, #content, #footer, #sidebar and maybe even more.
You’ve got a good point with the idea of simplifying the name like ct instead of content which indeed is making the code lighter. I wish there is a common way for developers in naming the DIVs but I don’t think you will find one.
The code is lighter, but less comprehensive by a human. I don’t know if we improve significantly website loading with such short names.
Are browsers faster to treat HTML, CSS or JS with short names ? I don’t think. If you find any suggestions about this subject I’m interested in. Thank’s.
Having good names in your CSS is essential to good front-end coding practices just like well name variables. One comment I have is to not use names like ‘bluebox’, your CSS and HTML should be as separate as possible. I could see a project becoming very confusing if all the bluebox divs are actually green, the redbox divs blue and so on.