HTML: Naming conventions for ID attributes

Question

Lately I've been doing a lot of front-end work. Some developers here have been naming their elements things like "divPhotoGalleryContainer" and sometimes I'll just see "galleryContainer."

Is there a good naming convention? Is adding "div" really useful?

Answer 1

The best naming convention is the one that makes sense to the developers/designers involved in the project. Given the two examples in your question, I'd be willing to bet that the "divPhotoGalleryContainer" contains "div" because either: it's referenced in a CSS selector, or some javascript code is looking at it and it's somehow helpful to know what type of element the id is referring to.

The "divPhotoGalleryContainer" convention seems like an HTML-ish flavor of Hungarian notation.

Answer 2

I don't think it's particularly useful, but I don't think it's harmful either. Consistency is the most important convention.

Answer 3

The most important thing is that you're consistant with whatever method you use.

However, I've always found it helpful to use the hungarian type notation of "divPhotoGalleryContainer", and "txtLastName". It makes it easier to distinguish page elements from other variables, both client and server side.

Answer 4

The stupid thing is, Hungarian notation like divPhotoGalleryContainer is totally unnecessary with CSS. You can name the ID PhotoGalleryContainer and target it to a <div> element in the CSS:

div#PhotoGalleryContainer {
  /* rules */
}

Inside that rule you can usually assume certain properties like display: block, unless you're targeting generic divs somewhere else (kinda bad practice).

There aren't really any specific conventions for naming, just use names that are clear and simple.

Answer 5

It's not harmful to add "div" in that case. As DisgruntledGoat said, hungarian notation can be useless with CSS (that is, unles you don't want to restrict a class to one element type), and Rob's comment is right, you may even change your elements and keep the same classes/IDs, but, it may be helpful to understand the code better, lately.

I always use hungarian notation because I'm used to it. If you're used to something, keep it, as it's easier than changing it. In enviroinments where many coders are writing the same things, unless there is a convention, you may write as you want. However, being over-descriptive is not as bad as being under-descriptive. That said, I vote for comprehensive names for everything including variables, functions, classes, IDs, XML elements, etc. If it gets hard to read, use more/better placed spaces/lines. If it adds more than wanted to the file size, minify it.