嵌套超4层应警觉，因CSS从右往左匹配导致回溯性能损耗，且复用性差；应改用BEM等语义化类名，明确Block、Element、Modifier职责，避免深层后代选择器。
为什么嵌套超过4层就该警觉
浏览器渲染时，CSS选择器是从右往左匹配的，.header .nav .item .link .icon 这种写法会让引擎反复回溯父级，尤其在动态插入节点或频繁重绘场景下，性能损耗明显。更关键的是，这类选择器几乎无法复用——改一个.nav内部结构，所有依赖它的子选择器都可能失效。
常见错误现象：style.css:127 里写了 .page .section .content .block .title，结果换了个布局框架，整个标题样式全崩；或者加个:hover伪类后，鼠标移入延迟肉眼可感。
- 真实使用场景：后台管理页的权限菜单、多级弹窗组件、表单内嵌的动态字段组
- 只要 HTML 嵌套深度 ≥ 4（即
<div><div><div><div><span>），就建议停止靠后代选择器“硬压”，转而用语义化类名接管样式责任 - 兼容性影响极小——BEM 不依赖任何新特性，IE8 都能跑；但若混用 CSS-in-JS 或 Shadow DOM，需注意作用域隔离是否覆盖了 BEM 类名
BEM类名不是拼凑，是分角色绑定
BEM 的 Block、Element、Modifier 不是命名格式要求，而是职责划分：一个Block必须能独立存在，Element 只能属于且仅属于一个Block，Modifier 只能开关状态，不能改变结构。
典型翻车点：card__header__title —— 这其实是两级 Element，违反了“Element 不嵌套 Element”的原则；正确写法是 card__title，哪怕它在 DOM 里确实嵌在 card__header 里。
立即学习“前端免费学习笔记（深入）”；
-
Block名直接对应功能，如search-form、user-avatar，不带位置或样式词（拒绝top-nav、red-button） -
Element用双下划线连接，只描述自身角色：search-form__input、search-form__submit，不体现层级关系 -
Modifier用双中划线，纯状态标识：search-form--compact、user-avatar--large，禁止写成search-form__input--disabled（那是search-form__input自己的 Modifier）
HTML结构可以扁平，但语义不能丢
重构不是把所有 <div> 全删掉，而是把视觉层级映射为 BEM 的逻辑层级。比如一个三级折叠菜单，DOM 可以保持 <ul><li><ul><li><ul> 结构，但每个 <li> 都加上 menu-item 类，最外层 <ul> 是 menu Block，内部 <ul> 是 menu__sublist Element。
容易被忽略的细节：BEM 要求每个 Element 必须显式声明 Block 上的类名。不能只写 <span class="menu__label">，而要 <span class="menu__label menu__item">（如果它同时是 item 的一部分）——否则 JS 操作 menu__item 时会漏掉这个节点。
- 当需要复用某段 UI（比如多个页面共用同一个筛选栏），直接复制
<div class="filter-bar">...即可，不用关心父容器是不是page-main或modal-body - 如果某个 Element 在不同 Block 里有相同表现（如
btn），不要强行塞进某个 Block 下，单独抽成独立 Block：button，再用button--primary等 Modifier 控制变体 - 避免用
!important覆盖 BEM 样式——这说明命名没对齐真实职责，该拆 Block 或调 Modifier
工具链能帮但不能替你思考
PostCSS 插件如 postcss-bem 或 VS Code 的 BEM 语法高亮插件，确实能自动补全 block__elem--mod，但它们不会告诉你 profile-card__avatar 和 user-avatar 到底该合并还是分离。真正卡点永远在语义边界上：一个“带删除按钮的标签”是 tag Block 本身的能力，还是 tag-list Block 提供的交互？
实操建议：
- 先画出组件树，标出哪些是独立交付单元（Block），哪些只是视觉片段（Element）
- 检查每个 Element 是否在多个 Block 中出现——如果是，它大概率该升级为 Block
- 上线前用 DevTools 的
Elements面板随机删几个类名，看样式是否只影响预期区域；如果删了card__body导致card__footer也变形，说明还有隐式依赖没解耦
嵌套越深，越要问一句：这个元素的存在，到底是在表达“它是什么”，还是“它在哪儿”。答案决定类名怎么写，而不是反过来。
