Question

One of my colleagues doesn’t like to use HTML classes and ids for javascript/jQuery purpose. Therefore I’ve seen that he had created custom html attribute such as

<div id="myid" class="cssClasses ..." [some-purpose-id]="mycustomId">...</div>

I asked him if it was really a good idea and he replied that he considers that classes and Ids should be reserved for styling.

Personally, I would have used classes. Some classes would have been used for styling, and some other classes would have been used for programming (jQuery selectors). The idea is to keep things appart also. And of course jQuery could set styling classes but if possible not use them for selection. Of course I also use id when appropriate but since an id is unique on a page, I like to do generic stuff using classes.

I would like to know you opinions on the better approach (if there is one). Thank you.

Answer 1

You should use classes and IDs for both javascript and CSS. Your colleague is wrong.

It helps to remember that you want to keep separation between data (html), presentation (css styling), and behavior (javascript). Classes and IDs are there for a reason, and it’s not for styling (and not for javascript, either!). They are there to allow you to semantically mark up your document.

When writing proper HTML, your classes and IDs should reflect the actual content and purpose of the data those nodes contain. Then, when you need to style them, you can specify the proper styling for, say the .zip_code class. And when you need special behavior, you can use javascript to apply the required behavior to your .deletable list items.

Of course, sometimes in the real world, there are people who feel very strongly against things, and you end up having to go along with what they want. In this case, you may have to compromise with your colleague and use HTML5’s data-* attributes, as someone else suggested. However, while this is a solution that will result in valid HTML, it is not what data-* attributes were designed for, so it isn’t technically the correct solution.