如何按BEM规范为表单元素命名类名？是否均需按元素命名？

BEM基础规则回顾 #

BEM的核心是Block（块）、Element（元素）、Modifier（修饰符），对应命名规则：

• Block：独立可复用的组件，类名用短横线分隔（或单个单词），比如这里的表单就是块authentication。
• Element：块的从属部分，不能脱离块单独使用，用__连接块名和元素名。
• Modifier：用于修改块/元素的状态、样式，用--连接，比如禁用状态的按钮可以加--disabled。

元素归属判断 #

你提供的表单里，所有内部的label、span、input、button都属于BEM的Element——它们都是authentication表单块的组成部分，脱离这个表单就失去了原本的登录认证功能，所以必须遵循Element的命名规则。

命名后的完整代码 #

<form class="authentication"
      autocomplete="off"
      method="POST"
      action="javascript:void(0);"
>
    <!-- 输入字段容器 -->
    <label class="authentication__field">
        <!-- 字段标签文本 -->
        <span class="authentication__field-label">Login</span>
        <!-- 输入框 -->
        <input class="authentication__field-input"
               type="text"
               name="login"
               placeholder=" "/>
    </label>
    <label class="authentication__field">
        <span class="authentication__field-label">Password</span>
        <input class="authentication__field-input"
               type="password"
               name="password"
               placeholder=" "/>
    </label>
    <!-- 提交按钮 -->
    <button class="authentication__submit"
            type="submit">
        Submit
    </button>
</form>

命名细节说明 #

• authentication__field：两个label都是表单的输入字段容器，功能一致，复用同一个类名。
• authentication__field-label：明确这是输入字段里的标签文本，从属authentication__field。
• authentication__field-input：输入字段里的输入框，同样从属authentication__field。
• authentication__submit：表单的提交按钮，是块的独立元素。

如果需要给不同输入字段做差异化样式，比如区分登录名和密码字段，可以给authentication__field加修饰符：

<label class="authentication__field authentication__field--login">
    <!-- 内容不变 -->
</label>
<label class="authentication__field authentication__field--password">
    <!-- 内容不变 -->
</label>

这样既保留了基础字段样式，又能针对特定字段定制样式。

内容的提问来源于stack exchange，提问作者MJW