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>

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?

  • 3
    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 Jan 31 '18 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 Jan 31 '18 at 7:20
  • 1
    i think "best practice" would be some mvvm magic that avoids having to do it at all. – Ewan Jan 31 '18 at 8:29
  • 1
    Data attributes – James Fenwick Jan 31 '18 at 9:26
  • 1
    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 Jan 31 '18 at 16:05

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.