How should I name these classes according to BEM?-CodePudding

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

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

CodePudding user response：

I would implement BEM in this way

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

CodePudding user response：

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