Appending text to the end of class names to make it obvious jQuery is utilizing those classes

Question

Hello everyone,

While developing a design using jQuery I stumbled across a problem. How would I know, without having to look through the javascript, if jQuery isn't doing a selector on a class in my HTML? That is to say, if I wanted to change the class to something else, I have no way of knowing if that class is being used elsewhere so it makes it difficult for me to easily update the design.

So, my thought was to duplicate a class name and append text (say, "-jquery") to the end of it if it is being utilized. This way, if I wanted to change the design in the future I could do so freely, and I would instantly know what elements on the page are being used in my javascript.

For example, let's say I have a simple div with a class:

<div class="header">This is a test</div>

And javascript that does something to the div:

$(".header").click(function() { 
     $(this).slideUp();
});

My idea is to change it to this:

<div class="header header-jquery">This is a test</div>

$(".header-jquery").click(function() { 
     $(this).slideUp();
});

Thereby separating my CSS and jQuery classes, making it easier to identify elements being used by jQuery, and allowing me to update the class if need be without affecting my javascript. Sure, the code looks a bit messier, but I don't mind.

The questions:

1. Is this a common practice at all?
2. Should I do this?
3. Is there a better way of achieving what I want?

EDIT:

One last question:

1. Is there, perhaps, a plugin for Visual Studio that may do this for me? That is, if it notices me editing the class of an element that is being used in jQuery, it would warn me? Or perhaps even color-codes the class name to let me know it's being used. A feature like this in the IDE would be killer...

Bara

Answer 1

If you only want a very specific element, instead of using a class use an id. If you're looking for specific elements that are children of one particular element, put an id on that parent. I wouldn't add a class just to use as a selector for javascript.

Answer 2

I get what you are saying and what you want to help with. Basically, you want to want add a class to the raw HTML (not dynamically) so you know if you ever go to change it in the future, that it is in use by jQuery.

1. Is this a common practice at all?

No, or at least not that I have seen. It seems like it would only clutter your code.

Update: However, as you brought up in the comments, in an environment where your HTML coder doesn't work with jQuery, it would alert them that they could break it when they edit that class. Truth be told however, as with most jQuery code, if he touches any HTML inside that element he risks breaking the code, not just the class.

2. Should I do this?

I personally would not. If anything, you could add a rel tag since its valid on any element:

<div class="header" rel="jquery"></div>

But even that is an "incorrect use" of a the rel attribute.

3. Is there a better way of achieving what I want?

Yes! At the top of your main JavaScript file for the web project put this:

/************ Classes and Selectors In Use **************

   .header
   form .special
   #footer p

*********************************************************/

When you go to change an element, just quickly scan the top of that file. Furthermore, if you are minifying your JS for production (which you should be doing) all that will be removed so it doesn't increase file size.

The right way?

Probably the best way that does take extra work, but not all the record keeping of my suggested solution, is to do automated tests. So, if you accidentally change a class, when you run your tests they will fail where they passed before.

You can read about it here: http://stackoverflow.com/questions/96066/automated-unit-testing-with-javascript <-- I personally think the answer below the accepted answer has more to offer