What is the naming convention for CSS classes for styles and events?

What is a clever way to name CSS classes so that they can differentiate between the ones used for styling and those for JS events?

Looking at div

with 4 CSS classes it will speed things up for me if I could see if the class is only being used for styling or just for design to cut down on debugging time.

I know I can start prefixing all CSS style classes with style_

, but is there a better way, maybe this is a convention too?

+3


source to share


2 answers


Just use "js-" at the beginning of all classes used for JS events.



+7


source


With jQuery (don't know the js solution) you can use datatypes and forget about choosing a class or VIA.

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 this data-event. You can call it whatever you want. 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 than explained here jQuery select by class VS select by attribute

+4


source







All Articles