card__content__title 错因有三：①违反bem单层元素关系，content若可复用应为独立块card-content；②若content仅为容器则title应直属card__title；③多级下划线导致purgecss误删、vs code无法高亮。

直接用 block__element--modifier 三段式命名，且每个类名必须绑定到具体块、禁止跨层嵌套或脱离上下文使用，否则 BEM 就退化成带连字符的普通命名——工具链校验失效、多人协作时语义断裂、后期重构成本指数级上升。

为什么 card__content__title 是错的

BEM 只承认 block__element 这一层关系，card__content__title 看似结构清晰，实则暴露了对组件边界的误判：

• content 如果具备复用性（比如在 modal 或 dialog 里也出现），它自己就该是独立的 card-content 块
• content 如果只是视觉容器、从不单独存在，那 title 应直接升为 card__title，避免无意义的中间层
• 多级下划线会让 PurgeCSS 无法识别合法类名，构建时可能误删；VS Code 插件也无法高亮或跳转到真实元素定义

修饰符必须依附于块或元素，不能“裸奔”

写 button--primary 合法，写 --primary 或 primary 就等于放弃 BEM 的契约能力：

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

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

下载

• button--primary 表示「按钮这个块的 primary 变体」，可被 stylelint-selector-bem-pattern 自动校验，也能被 clsx 类型推导识别
• button--primary button--disabled 是并列状态，允许同时存在；button--primary--disabled 是非法链式叠加，破坏可读性与静态分析
• 修饰符永远不能脱离宿主：没有 button，button--primary 就不该出现在 HTML 中；也不该在 CSS 里写 .button--primary:hover span 这种依赖 DOM 结构的选择器

SCSS 里嵌套必须只用 &__ 和 &--

空格会生成后代选择器，直接破坏 BEM 的作用域隔离原则：

• 错误写法：.card { &__title { .icon { ... } } } → 编译出 .card__title .icon，耦合了内部 DOM，一旦 icon 移动位置或被复用，样式就断
• 正确写法：.card { &__title { ... } &__icon { ... } &--horizontal { ... } }，所有子类都基于 & 展开，不引入任何隐式层级
• 真需控制子元素样式（比如图标颜色随主题变），优先用属性选择器：[data-role="icon"]，而非靠类名嵌套猜结构

最容易被忽略的是：BEM 不是“给 class 加前缀”，而是用命名把组件的合法结构、状态、复用边界提前钉死。一旦允许 icon--sm 这种脱离块名的全局类，或者靠 [class*="--"] 模糊匹配提取修饰符，整个约束体系就塌了。

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