bem禁止card__header__title等三层命名，因其违反“元素必须直属于块”的核心规则；应将title升为独立block（如heading）或用modifier（heading--in-card-header）表达上下文。

深层嵌套的子元素不该用多层 __ 命名，BEM 不允许 block__element__subelement 这类写法——它不是语法错误，而是语义失效的开始。

为什么 card__header__title 是非法的

BEM 只承认两种结构：block__element 和 block--modifier。出现第三个 __，等于把中间项（如 header）误当作 Block，但 card__header 本身只是 Element，没有独立语义边界和复用能力。

• card__header__title 一旦被写死，就无法脱离 card__header 的 DOM 结构单独使用
• 若后续把 card__header 改成 card__section，所有 card__header__title 样式静默失效
• SCSS 中写 &__header { &__title { } } 会编译出非法类名，且容易误给 card__header 加 padding，破坏 Element 的纯展示职责

深层 DOM 结构下该挂什么类名

HTML 可以嵌套四层、五层，但类名归属必须按“是否为独立 UI 单元”来判断，而不是按 DOM 深度机械拼接。

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

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

下载

• 如果一个视觉单元在别处复用（比如列表、下拉菜单、表格），它就该抽成独立 Block：list、dropdown、table
• 如果只是卡片内一段固定文案，且绝不出现在别处，优先用 Modifier 或 State 类：card__body-text--subtle 或 class="text is-in-card-body"
• 禁止用 card__body__list__item__text 这种长名——它暴露的是 DOM 路径，不是组件意图

多级导航菜单怎么命名才不崩

导航里的下拉菜单不是 nav__item__dropdown，而是一个完整、可独立实例化的 Block。

• nav 只管布局与语义：提供 nav__list、nav__item、nav__link
• 所有下拉交互逻辑由 dropdown Block 承担：dropdown__toggle、dropdown__menu、dropdown__item
• 二级菜单不是“一级菜单的子元素”，而是另一个 dropdown 实例，嵌在 nav__item 内部即可
• 避免跨 Block 命名：nav__dropdown、dropdown__menu__submenu 都违反职责分离

真正难的不是记住双下划线怎么写，而是每次加一层 DOM 时，停下来问一句：这个节点有没有自己的功能边界？能不能被抽出来，在用户列表、弹窗、侧边栏里复用？如果答案是肯定的，它就不该挂在父 Block 下，而该拥有自己的 block__element 结构。

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