Is it good practice to use CSS classes for logic?

Question

Suppose I have this code:

<div class="red hide">
  <!-- More tags here -->
<div>

and:

<style>
  .red {
    background-color: red;
  }
</style>

and finally:

$(function() {
  if (someConditionIsTrue) {
    $('.hide').hide();
  }
})();

Is it OK, if one uses CSS classes for logic (such as the example above)?

Note that in here the class .hide is not used for any styling, and is used only for the logic.

possible duplicate of [Can I use non existing CSS classes?](http://stackoverflow.com/questions/18701670/can-i-use-non-existing-css-classes) — BoltClock, Mar 05 '15 at 08:20
Besides the "CSS class" misnomer, this question also mistakenly refers to "CSS" the language in the title. The logic is based entirely in the script, and CSS has no part in it - as mentioned, the "hide" class does not appear in the stylesheet, and the "red" class that does is not involved in the script at all. — BoltClock, Mar 05 '15 at 08:26
Perfectly fine. If your using HTML5 you could use a data attribute instead. For example: `data-hidden="true"` and access it via `$('[data-hidden]').`. — Jeemusu, Mar 05 '15 at 08:30

Boaz · Accepted Answer · 2015-03-05T08:58:37.780

5

The class attribute is actually part of the DOM and not of the CSS. In other words, the class attribute (and any other attribute for that matter) is part of the structure of your HTML and already represents some form of client-side logic. As such, it's perfectly valid to use attributes as selectors in your CSS as well as in jQuery and JavaScript in general.

For example, these are all valid uses:

HTML

<div class="hide" data-example="1"></div>

CSS

.hide {display:none;} /* CSS class selector */
[data-example="1"] {display:none} /* CSS attribute selector */

JS

$('.hide').hide(); // jQuery Class selector
$('[data-example="1"]').hide(); // jQuery Attribute selector

CSS and JS combined

Following your comment, mixing the CSS with JS logic is indeed a valid concern. Ideally, the principle of separation of concerns dictates that each be used for its own specific purpose, i.e. CSS for styling and JS for DOM manipulation by adding the class.

For example:

CSS

.hide {display:none;} /* Set the styling of the class in CSS */

JS

$('#some-element').addClass('hide'); // Add the class to the DOM element in JS

edited Mar 05 '15 at 08:58

answered Mar 05 '15 at 08:18

Boaz

19,892
8
62
70

1

Although this is technically valid, I think it may cause confusion. Suppose I have written the code in my original question and another developer, 6 months later comes to edit this code. How does she know if the class `hide` is only used for logic and doesn't include styling as well? If she changes `hide` to `invisible` will it be OK, or will it break some styling? – Mar 05 '15 at 08:49
@TheCuriousGuy One does not preclude the other. You may use the class selector both in the CSS and in the JS simultaneously. Naturally, you should be careful they would not contradict one another. I've updated the answer to suggest a middle way. – Boaz Mar 05 '15 at 08:59
I know this topic is a bit old, but I've been thinking about this and often find it confusing in modern apps: people use classes to trigger JS, and it's not always clear where is the logic (JS function for instance). – AKOP Jan 11 '19 at 06:09
@AleksandrKopelevich Thanks for your input. In retrospect I tend to agree that it may be confusing. My experience shows it’s especially true in contemporary frameworks like Angular, where classes can be used as directive selectors. I’ve seen colleagues spend hours figuring out why adding a seemingly harmless class to an element causes an app to crash. – Boaz Feb 16 '19 at 23:32

score 0 · Answer 2 · answered Mar 05 '15 at 09:17

This is part of coding convention. You should think about the meaning of a term.

For instance, if i see "hide" in a class name, i can think that your css has specified a display: none for this class.

You should prefer a classname which describes the function like toggle/collapse or a common suffix (show-me, hide-me):

I am a very long sentence <span class="hide-me">hide me if you click</span>

If you have only one element concerned, you should use an "id" attribute.

All is a matter of semantic, and you do not have to think that the class attribute is reserved to CSS.

If CSS give much power to the "class" attribute, it is just a specific case of CSS selector and this attribute is not intended to be reserved to CSS.

Is it good practice to use CSS classes for logic?

2 Answers2