Question

I am concerned with using CSS classes that are defined in style sheets with my jQuery selectors. The reason for this is when a CSS class is defined in a style sheet there are many reasons for a developer/designer to change the name of the class or how it is used in the html that is detached from the jQuery selector that also uses the class. There is nothing obvious that tells the developer/designer that they need to account for JavaScript functionality when making this change.

Would it be better to just avoid coupling jQuery selectors with legit CSS classes, but instead use CSS classes that are not tied to any styles and have a say a prefix like ‘j_’ that makes it’s purpose obvious that is to be used exclusively as a jQuery selector? This would make the coupling less fragile at the cost of an extra class name in the markup. This would also make validation engines that find undefined classes less useful but the prefix would hopefully make it obvious that those classes serve a purpose as jQuery selectors.

….

I understand that CSS classes should be named based on their functionality. I do not however believe that naming the class that way solves the problem. Developers/Designers will still change the name even though their new name is still describing the same functionality, or they may modify where it is used. In these cases it is not obvious that these changes will impact the JavaScript functionality.

Answer 1

I think your problem is purely conceptual. The class attribute in HTML does not define a CSS class. It defines the element’s semantic class. It just so happens that CSS uses these classes to apply styles (in much the same way as jQuery selectors use them to apply other functionality). There is nothing preventing you from having classes that aren’t defined in a stylesheet, or that have no style information at all. As such, all classes should be considered a part of the code, not the styling. The code dictates the classes, the CSS just piggybacks on the semantic markup to apply styles. Thus the CSS should never be dictating class names, and no designer should ever be changing the class names. I realize that at first glance this probably sounds very much like the other answers that (very correctly) advise you to ‘use semantic names’, but there is a subtle conceptual difference here: the classes are the masters, the CSS styles are the slaves.

References: this website makes my point quite clearly; w3schools also mentions it briefly.