Is there a best practice for naming class selectors for identification alone

Question

Is there a best practice for naming class selectors for identification alone?

For example, for defining a single amount field with action button, we end up creating several div containers and div items among other elements.

<div class="form-group debit-amount">
  <label class="control-label">Debit amount/label>
  <div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control">
    <span class="input-group-btn">
      <button class="btn btn-default act-convert" type="button">Apply</button>
    </span>
  </div>
</div>

Now, I want to add a css selector, which is purely to identify click on the action button.

//Using a new class only to identify 
$myform.find('.debit-amount .act-convert').on('click', doConvert);

//Using the style class itself 
$myform.find('.debit-amount .btn-default').on('click', doConvert);

Is there a naming convention so that, these identification classes are not confused with style classes?

Any particular reason why you want to select that button via a class and not an id? Classes are supposed to apply to several things and ids are supposed to be unique; so it's no wonder you're having difficulty expressing this. — Kilian Foth
– Kilian Foth, Commented Jan 31, 2018 at 7:14
Yeah.. in this example it's not clear why I can't use an id. But, I have similar situations where component is repeatable, like a row of conditions, where I have add and remove buttons in each condition row. — Teddy
– Teddy, Commented Jan 31, 2018 at 7:20
i think "best practice" would be some mvvm magic that avoids having to do it at all. — Ewan
– Ewan, Commented Jan 31, 2018 at 8:29
Well, if you really need each class name to be unique (I recommend that you do almost anything else, like some of the other approaches mentioned in the comments here), why don't you simply add an incrementing numerical suffix to each class name? — Robert Harvey
– Robert Harvey, Commented Jan 31, 2018 at 16:05

Ewan · Accepted Answer · 2018-02-03 11:44:08Z

Is there a naming convention so that, these identification classes are not confused with style classes?

I think your question is solved by unravelling the difference between "identification" and "style" classes.

If you click action simply changes the colour or something then it could be thought of as a "style" class. Indeed with modern CSS you could probably achieve the same effect without resorting to javascript.

But the mere fact that you are using javascript to achieve an effect doesn't mean that suddenly a "style" class isn't an appropriate selector.

If your action is a business logic method, then, yes we start to think that we should divorce it from "style". But in fact we could consider such linking code as Binding between your view and viewmodel. There is no reason why multiple buttons shouldn't trigger the same action, or hovering over an image or any red div or whatever.

The binding is part of the view and as such is free to use any form identifier it chooses.

Stack Exchange Network

Is there a best practice for naming class selectors for identification alone

1 Answer 1

Your Answer

Hot Network Questions

Is there a best practice for naming class selectors for identification alone

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions