Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67469

BEM naming - am I doing this correctly?

$
0
0

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>


Viewing all articles
Browse latest Browse all 67469

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>