CODEWITHSUNDEEP
javascriptjqueryhtmlcssnaming-conventions
radbyx
radbyx

Reputation: 9650

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

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?

Upvotes: 5

Views: 1243

Answers (2)

Gezzasa
Gezzasa

Reputation: 1453

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

Upvotes: 4

PB101
PB101

Reputation: 142

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

Upvotes: 8

Related Questions