bem中不存在“grandchild”概念，.card__header__title等三层命名违反element必须直属于block的核心原则；正确做法是将title升格为独立block、用modifier（如.card__title--in-header）表达上下文，或借助data属性锚定样式。
Grandchild Element在BEM里根本不存在
BEM规范中没有grandchild这个概念——它不是语法错误，而是逻辑误用。当你写出.card__header__title或.list__item__link这类类名时，已经违反了BEM核心原则：Element必须直接隶属于Block，不能嵌套层级。
为什么.block__element__subelement是错的
这种写法看似“更精确”，实则破坏BEM的语义边界和可维护性：
-
.card__header__title暗示title属于header的子结构，但BEM要求所有Element都属于同一个Block（即card），所以正确命名应为.card__title - 一旦
header被抽离复用（比如变成独立headerBlock），.card__header__title就失去上下文，无法单独存在 - 编译后CSS选择器权重不变，但开发者阅读成本陡增：你得记住“header下面的title”和“footer下面的title”是不是同一类元素
真正该用什么替代“grandchild”
三种合法且轻量的解法，按优先级排列：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 升格为独立Block：如果
title有复用可能（比如多个组件共用相同标题样式），直接定义.titleBlock，而非依附于父级 - 用Modifier表达状态差异：如
.card__title--in-header、.card__title--in-footer，语义清晰，不增加DOM耦合 - 借助
data-属性做样式锚点：当确实需要区分同类型Element在不同容器中的表现时，加data-context="header"，再用[data-context="header"] .card__title匹配——这比硬编码嵌套类名更灵活、更易测试
Vue/React项目里最容易踩的坑
框架组件模板容易诱使你写出“视觉层级=DOM层级=类名层级”的代码：
- 别在JSX/Template里写
class="card__header__title"，哪怕它看起来“结构对齐” - 不要用
:deep(.card__header .card__title)去强行匹配“grandchild”逻辑——这等于用穿透机制绕过BEM设计初衷 - 检查第三方UI库的class输出：很多库默认给内部元素加多层class（如
el-button__inner），你要做的不是模仿，而是用:deep(.el-button__inner)精准覆盖，而不是自己造button__icon__svg
真正难的不是起名，而是每次写class前问一句：这个元素脱离当前父容器后，还能独立存在、被理解、被复用吗？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
