Question: jQuery: How to distinguish between classes used for CSS and ones used for jQuery manipulation?

Question

jQuery: How to distinguish between classes used for CSS and ones used for jQuery manipulation?

Answers 5
Added at 2017-01-04 12:01
Tags
Question

Let's say I've the following code:

HTML:

<div class="myclass1">some text</div>

CSS:

.myclass1 { color: red; }

jQuery:

$('.myclass1').text();

It's simple now, but when code becomes bigger, I find it difficult to distinguish between classes used just for CSS, and other classes used only for jQuery. For example:

<div class="myclass1 myclass2 myclass3 myclass4 myclass5">some text</div>

Now when I look at the div with many classes, it's not easy to know which classes are used for CSS only, which are used for jQuery only, and which are used by both CSS AND jQuery.

The Question: Are there already approaches to avoid this issue? Or am I just overthinking about it?

I'm thinking of naming my classes based on usage, so for example classes used for CSS only would be named as "css_myclass1", classes used for jQuery only would be named as "jq_myclass2", and classes used for both would be named as "cssjq_myclass3".


NOTE: I know the answers might be opinion based, but I need to know what are the different approaches could be used, specially because I'm about to start a big project in which this simple issue might turn into a nightmare-code-complexity very quickly!

Answers to

jQuery: How to distinguish between classes used for CSS and ones used for jQuery manipulation?

nr: #1 dodano: 2017-01-04 12:01

As you stated, there is no right or wrong. With that being said, you could e.g. use the data attribute (jQuery data()) for jQuery-related stuff and use classes for css styling only.

nr: #2 dodano: 2017-01-04 12:01

There is no built-in way to distinguish classes reserved for stylesheets and classes reserved for scripts, because there is no such distinction in the first place. The class attribute holds one or more class names, which can be used for any number of purposes. The fact that you anticipate some of your class names being used in multiple places just serves to further the point. There is no reason a given class name on a given element has to be reserved for a stylesheet or a script or any other singular use.

If you really must keep your style and script classes separate, you'll have to namespace them yourself.

nr: #3 dodano: 2017-01-04 12:01

We used the approach with naming classes which are for Javascript and jQuery and shouldn't be for styling with prefix "js-". And layout classes are quite normal with no prefix.

Lately we try to switch to use data-attributes for non-styling jQuery issues.

nr: #4 dodano: 2017-01-04 12:01

I find using ID's over classes helps to distinguish the difference between those elements not using JavaScript than to those that are.

So, I usually only ever add an ID to those elements that are being used in JavaScript or jQuery, and leave the classes for the CSS side of things.

nr: #5 dodano: 2017-01-04 12:01

A suggestion could be to use classes for CSS and data attributes for JavaScript:

HTML:

<div class="myclass1" data-value="some">some text</div>

CSS:

.myclass1 { color: red; }

jQuery:

$('[data-value="some"]').text();
Source Show
◀ Wstecz