I have just recently came across BEM naming convention and I struggle to understand exactly how to do it. In my opinion, the below makes sense and I do understand the difference in block, element and modifier but I struggle to understand when something might be a reusable piece of component or just a block. Are you please able to have a look at the below and guide me in regards to the class names?
<div class="register-form__user">
<h1 class="title">
Register
</h1>
<p class="description">
User Information
</p>
<form class="register-form__user__main"">
<div class="input-required">
<input class="input-styled input--long" placeholder="Username" name="search3" type="search" />
</div>
<div class="input-required">
<input class="input-styled input--long" placeholder="Password" name="text" type="text" />
</div>
<div class="input-required">
<input class="input-styled input--long" placeholder="E-mail Address" name="text" type="text" />
</div>
<div><label class="text-small register-form__user__dob" for="date">DOB: </label>
</div>
<div class="register-form__payment">
<p class="description">
Payment details
</p>
<div class="register-form__payment__terms">
<input class="input-styled" name="radio" type="radio" />
<label class="text--small" for="radio">Agree terms and conditions</label>
</div>
<div>
<button class="main__payment__button" type="submit">Register</button>
</div>
</div>
</div>