Question

This is related to naming conventions for a DOM element’s id attribute and I guess the name attribute as well. When it comes to JavaScript, from what I understand and have done is always use camel case except for the names of classes. Classes are Pascal cased.

Having said that I develop in ASP.NET mainly and here’s where I run into a naming issue for the id attribute. In ASP.NET if you drag and drop a new server control to a page(which I rarely do, I’m a type the markup kinda guy), the default names are always Pascal cased because they need to conform to the .NET framework naming guidelines for server-side code.

So when it comes to naming the id attribute of ASP.NET server controls or just elements in markup, I follow the rule to camel case the id attribute (Javascript naming guidelines), but this conflicts with the .NET naming guidelines.

So, one, what casing do you folks normally do for the id attribute in DOM elements and two what do the .NET folks who develop in ASP.NET do for naming the id attribute?

On top of that when I’m creating form elements in markup, I generally use Hungarian notation for text inputs, like

<input type="text" id="txtUserName" />

or for checkboxes like

<input type="checkbox" id="chkSelectAll" />

Which definitely goes against .NET server-side code naming guidelines and maybe JavaScript guidelines as well.

Any advice is much appreciated.

Answer 1

• Keep it semantic. Use complete, simple, (preferably English) words. Don’t try to come up with something fancy or technical, and don’t describe what it is – we know that. Describe what it does. Describing purpose adds informational value.

• Don’t abbreviate anything! BW_RCB01_SW meant something to the team who did our CSS to years ago, but it doesn’t mean anything to me now and I have to work backwards to try to translate what BW_RCB01_SW corresponds to for my purposes, and either remember that translation or document it somewhere. Better? blackwhite-boxtype1-bottomleft. It’s longer but also doesn’t require a Rosetta stone.

• Keep it all lower-case and use underscores or hyphens. I prefer hyphens, but that’s totally a preference. There should be no impediment to using hyphens, since they are not reserved in CSS or HTML and IDs are treated as literal strings in every other language. Lower case is all experience – too many hours wasted wondering why the heck won’t this style apply oh. pageContainerLeft is not the same as pageContainerleft.

• Identify exactly what that element is, but no more. Think seriously about each piece of information you’re embedding in the name and whether it’s necessary. In your example – do you need to know it’s a checkbox by the ID? Unlikely. You already know what element you’re referring to because it’s a unique ID and you have to code against that element anyway.