Home/ Questions/Q 8042193
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T04:29:42+00:00

I’m looking for suggestions or pointers to best-practices for segregating classes used for browser

  • 0

I’m looking for suggestions or pointers to best-practices for segregating classes used for browser styling from those used for dom manipulation.

More specifically, we’re creating a single-page, backbone.js webapp that utilizes jQuery extensively for updating page elements dynamically (adding, hiding and appending new content to the page). The problem we’re running into seems to originate with the overloading of the class attribute – it’s used for styling presentation, AND for identifying page elements for GUI app logic via jQuery. This causes problems when it comes to modifying styles as there is no obvious way to know whether a given class (or DOM element for that matter) is required by the underlying javascript application.

In other words, if someone naively changes or removes a class on a tag, assuming they are only modifying presentation, it breaks the application. I’m looking for a way to separate these concerns – to keep the classes used for jQuery selectors separate from those used for CSS styling. I’m assuming this is a ‘solved problem’ as we’re obviously not the first to write a javascript heavy webapp. Is there a standard way to deal with this? Am I missing something obvious?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The good way to do it probably not to use css classname for binding JavaScript logic at all. HTML5 introduces a way to add custom user-defined attributes for tags. To do it you simply add attribute to tag but start it’s name with “data-” prefix. For example:

    <a href="#" data-role="link-to-author" data-value="John Doe">John Doe</a>

    jQuery, starting from 1.4.3, have build-in methods to work with such attributes using .data() function. You can read about it in more details here: http://api.jquery.com/data/#data-html5

    If it is necessary for your app to use classnames as pointer for some reason, then you can make following convention:

    Classnames starting with “js-” prefix are only used buy scripts to identify html elements, and you can’t use them for styling. So this way your elements will have multiple classes on each element (some for styling, some for logic):

    <a href="#" class="author js-link-to-author">John Doe</a>

    This way classes without prefix can be removed without concern, and you can be pretty sure that you will broke something if you remove class with prefix.

    • 0