4

What is a smart way to name CSS classes to be able to distinct between those used for styling and those for JS events?

Looking at a div with 4 CSS classes, it would speed things up for me, if I could see if the class is used for only styling or only design, to reduce debugging-time.

I know I can start prefixing all CSS-style classes with style_, but is there a better way, that's maybe are a convention too?

radbyx
  • 9,352
  • 21
  • 84
  • 127

2 Answers2

8

Just use "js-" in the begining of all classes used for JS events.

PB101
  • 142
  • 4
  • I like that. It's shorter than my `style_` and I modify the second part (JS) and leave the styling-classes untouched, that's probably also have a stronger intuitive binding. – radbyx Jun 29 '17 at 11:22
  • We also use that js- notation. Sometimes we also try to use data-attributes for JS-purposes – Martin Wunderlich Jun 29 '17 at 11:27
  • do you mean all classes, or just the hook-class? Like if click event reads data from 2 elements and changes another 3 elements, do you create 6 css classes with js- prefix, or 4? or 3? or just 1 (to put on the button)? – klm123 Oct 21 '21 at 08:42
4

With jQuery (don't know js solution) you can use data types and forget about selecting VIA class or ID.

https://jsfiddle.net/tcfhdfth/1/

<div data-event="changeBackground"><h1>hello</h1></div>

$("[data-event='changeBackground']").css('background-color', 'red');

You don't need to call it data-event. You can call it anything you like. Just not a reserved word.

To create listeners you can do the following.

$('body').on('click', "[data-event='changeBackground']", function () {
    $("[data-event='changeBackground']").css('background-color', 'red');
})

Performance is much better as explained here jQuery select by class VS select by attribute

Gezzasa
  • 1,443
  • 8
  • 17
  • So how would you write this? " $('body').on('click', '.deleteGrps', function () { } ". I mean, can you bind, like I do with ("$('body'"), before the element is created in the DOM? – radbyx Jun 29 '17 at 11:30
  • 1
    Meaning deleteGrps is the class you're selecting? – Gezzasa Jun 29 '17 at 11:31
  • 1
    https://jsfiddle.net/tcfhdfth/2/ In the fiddle's case only a h1 is used so the body wraps around the h1. SOOOOO...click on the h1 xD – Gezzasa Jun 29 '17 at 11:34
  • My comment above this one is so stupid. It's late afternoon here and I want to go home. No need to click on 'body' as the listener is on 'h1'...but you knew that already ;) – Gezzasa Jun 29 '17 at 11:43
  • Why did you choose this approach, instead of a simple prefix? Is it deliberately to avoid any possible errors for the Style/JS issue and to make it more readable? Or is there more / other reasons? Prefix "js-" is so neat and simple, as long as you remembered it.. :) – radbyx Jun 29 '17 at 11:45
  • No worries, I only clicked the text anyways. It was just the syntax I was looking for and expecting. – radbyx Jun 29 '17 at 11:46
  • You can honestly call it what you want. https://jsfiddle.net/tcfhdfth/3/ It is js="" now :). Oh wait you mean instead of using classes. You want JS specific and this way you don't need to worry about selecting styled classes. – Gezzasa Jun 29 '17 at 11:59
  • 1
    OOOHHHH...Performance is much better https://stackoverflow.com/questions/6533285/jquery-select-by-class-vs-select-by-attribute – Gezzasa Jun 29 '17 at 12:29
  • Oh I have to go with the prefix then if it's x10 times faster. Much appriciation though bro. – radbyx Jun 29 '17 at 12:34
  • 1
    Second answer gave me a different story. Haha – Gezzasa Jun 29 '17 at 16:43