Is using CSS classes for JS markup a bad practice?

Question

The scenario:

• A homepage that is generated with PHP and a template engine.
• The page is being redesigned.
• The new design is based on jQuery UI.
• The current CMS uses multiple templates: a page template, an article details template, a comments template etc.

The problem: Some templates (like the article details template) generate html fragments that should use jQuery UI elements like tabs. Currently the data source of the page template does not contain any information which elements should be turned into jQuery UI elements in the main jQuery call in the documents head.

Possible solution Add a CSS class like "jqTabs" to the html markup of the sub-templates and use the selector .jqTabs in the main jQuery script.

Question Is this a bad idea?

BTW: "Use a different CMS" is not a valid answer, because this is not an option right now (deadline, budget,... you name it -.- ).

Answer 1

Not a bad idea at all.

That is one of the primary uses of classes.

A class (like and ID) can be used as both a way to style an element and / or a hook for scripting.

In this case, it might be the best possible solution, as it allows for what seems to be minimal markup changes for a wider redesign.

And it is easily reversible.

Answer 2

I believe that using CSS classes as hooks for JavaScript can indeed be a bad practice. The reason I say this is because this approach intermingles your CSS and JavaScript and can often lead to unnecessary confusion.

Let me explain: Right now I am working on adding new templates to an existing system which uses dynamic user controlled admin settings to control CSS properties (page width, font sizes, colors, etc). These settings can also affect JS properties (slideshow options, delay between slides, etc.).

The problem is that since so many CSS classes were used as JavaScript hooks, I am having a terribly hard time determining which classes are used for styles and which ones are used as JS hooks, and which ones are used for both! As a result, when doing a new template, it would be very difficult to start from scratch with new markup as I would be leaving out various important classes for both CSS and JS functionality.

The task would be much easier if CSS classes were ONLY used for styling, and other JS hooks were only used for JS. I envision this being accomplished with HTML5 data attributes, which would look something like this:

<a href="#" class="button" data-lightbox="true" data-slide-delay="250">my link</a>

By using the HTML5 data attributes for JavaScript hooks and the class attribute for CSS styling, we can be sure that all classes are ONLY related to CSS, and anything JavaScript related simply gets its custom attribute.

Another option I have used is prefixing any css class with js- that is ever referenced by the JavaScript. That way you would know which classes you could remove safely for styling and which ones had to remain for existing functionality.

<a href="/mylink" class="my-style-class my-other-style-class js-my-hook-1 js-myhook-2">
    My link
</a>