我是编程和处理表单的新手，我很难理解我是否正确执行了BEM（块，元素，修饰符）命名约定。您是否能够提供帮助并看到将来可以改进的地方？任何帮助将不胜感激。我主要是在努力了解哪一部分可以重用，哪一部分是代码块的一部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Form</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="register-form">
<div class="register-form__user">
<h1 class="title">
Register
</h1>
<p class="description">
User Information
</p>
<!-- not reusable? part of register form -->
<form
class="register-form__user__main"
action="search.html"
method="get"
>
<div class="input--required">
<!-- <label for="search3">search: </label> -->
<!-- could be reusable could be not? -->
<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>
<input
class="input-styled input--long"
type="text"
name="input"
placeholder="DD / MM /YYYY"
/>
</div>
<div>
<label class="text--small" for="radio">Gender</label>
</div>
<div class="styled-radio">
<input
class="styled-radio__radio input-styled"
name="radio"
type="radio"
/>
<label class="text--small" for="radio">Male</label>
</div>
<div class="styled-radio">
<input
class="styled-radio__radio input-styled"
name="radio"
type="radio"
/>
<label class="text--small" for="radio">Female</label>
</div>
<div class="register-form__user__main__checkbox">
<p class="text--small">
Check all the languages you have proficiency in:
</p>
<label class="text--small main checkbox"
>HTML
<input class="input-styled" name="checkbox" type="checkbox" />
<span class="geekmark"></span>
</label>
<label class="text--small main checkbox"
>CSS
<input class="input-styled" name="checkbox" type="checkbox" />
<span class="geekmark"></span>
</label>
<label class="text--small main checkbox"
>JS
<input class="input-styled" name="checkbox" type="checkbox" />
<span class="geekmark"></span>
</label>
<label class="text--small main checkbox"
>PHP
<input class="input-styled" name="checkbox" type="checkbox" />
<span class="geekmark"></span>
</label>
<label class="text--small main checkbox"
>JAVA
<input class="input-styled" name="checkbox" type="checkbox" />
<span class="geekmark"></span>
</label>
</div>
</form>
</div>
<div class="register-form__payment">
<p class="description">
Payment details
</p>
<div class="search_icon__flex">
<input
class="register-form__payment__search input-styled"
placeholder="Search for card type..."
type="search"
/>
<svg class="search_gl">
<use xlink:href="media/sprite.svg#icon-search"></use>
</svg>
</div>
<div class="input--required">
<input
class="input-styled input--long"
placeholder="Card number"
name="search3"
type="search"
/>
</div>
<div class="input--required">
<input
class="input-styled input--long"
placeholder="Name on card"
name="search3"
type="search"
/>
</div>
<div class="register-form__payment__select">
<label class="text--small">Expire Date</label>
<div class="register-form__payment__select__inner">
<select>
<option value="00">--Select Month--</option>
<option value="01">January</option>
<option value="02">February </option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select>
<option value="00">--Select Year--</option>
<option value="16"> 2016</option>
<option value="17"> 2017</option>
<option value="18"> 2018</option>
<option value="19"> 2019</option>
<option value="20"> 2020</option>
<option value="21"> 2021</option>
</select>
</div>
</div>
<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>
</body>
</html>
实际上，您的班级名称存在一些问题，
[我想向您指出，BEM Cheat sheet是为了简化您的困惑。