表单 BEM 命名 - HTML

在 HTML 中，表单是常见的一个元素。BEM（Block Element Modifier）是一种前端开发中常用的命名规范。 BEM 可以使开发变得更加规范，可维护性更高，而且易于理解。本文将介绍如何使用 BEM 命名规范来命名表单元素。

BEM 命名规范

BEM 命名规范是基于模块化思想的一种思路，将一个元素（block）分成多个组成部分（elements）和其它相关的修饰符（modifier）组合而成。命名规范如下：

• Block：块，独立的单元，例如表单。
• Element：组成部分，块中的小组成部分，例如表单中的单元格，按钮等。
• Modifier：修饰符，用于描述一个块或元素的特性或状态，例如表单中的禁用状态。

使用 BEM 命名规范命名表单元素时，我们可以遵循以下规则：

1. Block：表单整体可以作为一个 block，命名示例：.form。
2. Element：表单中的组成部分可以作为 element，例如表单中的单元格，可以命名为.form__cell。
3. Modifier：如该表单是不可编辑状态，则可以命名为.form--disabled。

BEM 命名示例

根据以上规则，下面是一个使用 BEM 命名规范来命名表单元素的示例：

<form class="form form--disabled">
  <div class="form__cell">
    <label for="username" class="form__label">用户名：</label>
    <input type="text" class="form__input" id="username" placeholder="请输入用户名" disabled>
  </div>
  <div class="form__cell">
    <label for="password" class="form__label">密码：</label>
    <input type="password" class="form__input" id="password" placeholder="请输入密码" disabled>
  </div>
  <button type="submit" class="form__btn form__btn--disabled" disabled>登录</button>
</form>

• .form：表单整体作为 block。
• .form--disabled：表单禁用状态作为 modifier。
• .form__cell：表单中的单元格作为 element。
• .form__label：表单中的 label 作为 element。
• .form__input：表单中的 input 作为 element。
• .form__btn：表单中的按钮作为 element。
• .form__btn--disabled：表单按钮禁用状态作为 modifier。

总结

使用 BEM 命名规范命名表单元素，能使代码更加规范、可维护性更高、易于理解。结合实际项目需求，可灵活运用 BEM 命名规范，以便更好地实现代码复用和效果展示。