BEM要求用单一顶层类名和显式子元素类名（如.card__title）切断对DOM结构的依赖；禁止.card .title等后代选择器，因其绑定嵌套路径、易导致匹配错误和样式污染；所有元素必须直属于block，禁用三层嵌套，修饰符须精准归属block或element，伪类状态需转为显式类名。
直接用单一顶层类名 + 显式子元素类名，就能切断 CSS 对 DOM 结构的依赖，避免样式漂移和跨组件污染。
为什么不能写 .card .title
这种父子选择器会把样式绑死在 DOM 嵌套路径上。一旦 card 被复用到 .modal__content 或 .sidebar 里，.card .title 就可能匹配错节点，或者被外层样式意外覆盖。BEM 不靠结构推导，而靠类名契约——只要写了 card__title，就代表这个语义角色必须存在，且样式只属于它自己。
-
card__title必须和card同时出现，不能单独使用 - 禁止三层嵌套类名（如
card__header__title），那说明该拆出新 block - 不要用位置词命名元素，
card__left改为card__avatar或card__start
如何正确表达“标题下面带副标题”这种嵌套
副标题不是标题的子元素，而是 card 的另一个独立元素。BEM 不映射 DOM 深度，只表达语义归属。
- 写
card__subtitle，而不是card__title__subtitle - 如果副标题只在特定变体下出现，用修饰符：
card__subtitle--faded - HTML 中可以放在
card__title后面、同一层级，也可以包进card__header，只要类名不越界 - 避免用
:has()或:nth-child()控制样式——它们不可控、难调试、影响性能
修饰符该加在 block 还是 element 上
看变化归属：影响整体行为/外观的加在 block 上，只改局部表现的加在 element 上。
立即学习“前端免费学习笔记（深入）”；
-
card--horizontal：整个卡片布局方向变了，修饰 block -
card__title--highlight：只让标题高亮，修饰 element - 禁止
card__title--disabled：标题本身不会“禁用”，这是 card 状态，应写card--disabled并由 JS 统一控制 - 多个修饰符并存时分开写：
card card--featured card--compact，不连写card--featured--compact
遇到伪类状态（:hover/:focus）怎么办
CSS 伪类无法触发 transition class 切换，也不被 SSR 或可访问性工具识别，BEM 要求显式暴露状态。
- 不要写
.card:hover .card__title，改用.card__title--hovered - JS 控制 class 切换，配合
tabindex和键盘焦点逻辑 - 服务端渲染时，初始状态需通过 data 属性或 SSR props 注入，确保首屏一致性
- 避免在修饰符里重写整套样式，只微调关键属性（如 color、opacity、transform）
真正容易被忽略的是：BEM 类名不是对 HTML 的翻译，而是对组件职责的声明。写错一个 __ 或 --，表面是语法问题，实际是边界没划清——比如把 dropdown 当成 nav__dropdown，等于把交互逻辑塞进布局组件里，后续动效、z-index、键盘导航全得跟着 nav 改。
