How should I name these classes according to BEM?

Question

How should I name these classes according to BEM? Are all of them considered elements and need to be named accordingly?

<form class="authentication"
      autocomplete="off"
      method="POST"
      action="javascript:void(0);"
>
    <label class="">
        <span class="">Login</span>
        <input class=""
               type="text"
               name="login"
               placeholder=" "/>
    </label>
    <label class="">
        <span class="">Password</span>
        <input class=""
               type="password"
               name="password"
               placeholder=" "/>
    </label>
    <button class=""
            type="submit">
        Submit
    </button>
</form>

score 0 · Answer 1 · answered Jul 19 '22 at 12:03

I would implement BEM in this way

<form
  class="authentication"
  autocomplete="off"
  method="POST"
  action="javascript:void(0);"
>
  <label class="authentication__login">
    <span class="authentication__login__label">Login</span>
    <input
      class="authentication__login__input"
      type="text"
      name="login"
      placeholder=" "
    />
  </label>
  <label class="authentication__password">
    <span class="authentication__password__label">Password</span>
    <input
      class="authentication__password__input"
      type="password"
      name="password"
      placeholder=" "
    />
  </label>
  <button class="authentication__submit" type="submit">
    Submit
  </button>
</form>

score 0 · Answer 2 · answered Jul 19 '22 at 12:20

Just Make sure, that your child element's classes are similar with their parent's classes. And give a relatable class name with the tag you are using. So that, if anyone wants to change your code...they will not face any irritation of your class name and they will easily understand.

<body>
    <form class="authentication" autocomplete="off" method="POST" action="javascript:void(0);">
        <label class="authentication-login">
            <span class="authentication-login-label">Login</span>
            <input class="authentication-login-input" type="text" name="login" placeholder=" "/>
        </label>
         <label class="authentication-password">
            <span class="authentication-password-label">Password</span>
            <input class="authentication-password-input" type="password" name="password" placeholder=" "/>
        </label>
        <button class="authentication-submit-button" type="submit">Submit</button>
    </form>
</body>

How should I name these classes according to BEM?

2 Answers2