bem 通过 block__element--modifier 三层命名强制语义化：block 表明归属（user-card），element 表明角色（avatar），modifier 表明状态（round），使类名自解释、不依赖结构与注释，避免动词或样式词破坏抽象性，并需工具校验与团队共识保障实施。

类名本身就能回答“这是谁的、是什么、当前什么状态”，不用翻 HTML、不靠注释、不查 JS 就能看懂——这才是 BEM 提升自解释性的核心。

为什么 user-card__avatar--round 比 avatar 或 rounded 更可靠

BEM 把三层语义硬编码进类名：Block 名说明归属（user-card），Element 名说明角色（avatar），Modifier 名说明状态（round）。传统命名如 avatar 无法判断它属于用户卡片、评论头像还是侧边栏；rounded 更糟，没人知道它修饰谁、在哪生效。

• user-card__avatar 表明它是 user-card 模块的直属子元素，哪怕 DOM 结构里隔着三層 div 也成立
• user-card__avatar--round 明确作用对象是 avatar，不是整个 card，也不是 card__name
• 审查元素时看到这个类名，立刻能推断用途，不需要点开 HTML 确认结构

search-form__clear 为什么不能写成 search-form__delete-btn

Element 名一旦混入动词（delete）或样式词（btn），就失去角色抽象能力，自解释性直接归零。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• delete-btn 暗示行为和组件类型，但实际可能是图标、文字链接、甚至 Tooltip 触发器
• 换成 search-form__action--delete：action 是稳定角色，delete 是可枚举状态，后续可自由叠加 --edit、--share
• 如果某天按钮被替换成 <a></a>，delete-btn 类名就失真；action--delete 依然准确
• Element 名必须脱离实现细节，只描述“它在结构中承担什么职责”

Sass 嵌套里 & 不等于 BEM 合法性保障

Sass 的 & 是语法糖，编译器不会校验生成的选择器是否符合 BEM 规则，人工疏忽极易产出非法结构。

• 错误写法：

  .card {
    &__header {
      &__title { ... } // 编译出 .card__header__title，违反 BEM 元素不可嵌套规则
    }
  }

• 正确做法：把 header__title 拆成 card__header 和 card__title，或让 header 升格为独立 Block
• 修饰符别塞进元素嵌套：&__body &--expanded 会产出 .card__body--expanded，但 Modifier 应作用于 Block（card--expanded）或 Element（card__body--expanded），不能跨层拼接
• 用 stylelint-selector-bem-pattern 插件做静态校验，比靠人眼盯更可靠

真正容易被忽略的不是语法，而是团队对 “Element 是什么” 的共识——比如 card__content 看似合理，但 content 是筐，后期加图、加按钮、加描述后，别人无法判断这个 class 到底管哪部分。必须按真实角色拆： card__image、card__body、card__footer。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！