Seeking recommendations or guidelines for effectively segregating classes utilized for browser styling and DOM manipulation.
Specifically, we are developing a single-page app using backbone.js and heavily relying on jQuery for dynamically updating page elements (such as adding, hiding, and appending content). The main issue we are encountering stems from the dual use of the class attribute – it serves both for styling purposes and identifying elements for GUI functionality through jQuery. This creates complications when trying to modify styles as it is unclear which classes (or DOM elements) are essential for the underlying JavaScript application.
In simple terms, altering or removing a class on a tag without understanding its role in the JavaScript logic can disrupt the application. I am exploring solutions to distinguish these roles and keep classes for jQuery selectors separate from those used for CSS styling. I assume this is a common challenge with established solutions, given the prevalence of JavaScript-heavy web applications. Is there a standard approach to address this issue that I may be overlooking?