深层嵌套选择器降低CSS性能且难维护，因浏览器从右向左匹配时需反复回溯父节点；应优先用唯一类名、限制嵌套≤3层、禁用ID/标签选择器；BEM通过扁平类名显式限定作用域，配合工具约束可保障可维护性。
为什么深层嵌套选择器会让CSS变慢又难维护
浏览器匹配CSS选择器是从右往左执行的，.header .nav .item a:hover 这类多层嵌套写法，会让引擎反复回溯父级节点，尤其在DOM结构深、元素多时，重排重绘开销明显上升。更实际的问题是：一旦某个中间类名改了（比如 .nav 换成 .main-nav），整条规则就失效，但你未必能立刻发现——它可能只影响某个角落的下拉菜单。
常见错误现象：div ul li a 这种纯标签选择器被滥用；用 :nth-child(3n+1) 绑定样式逻辑，导致HTML结构一动样式就崩；组件内写 .modal .content .title，结果父组件里另一个 .content 被意外染上样式。
- 优先用唯一性类名，而非依赖层级关系
- 避免超过 3 层嵌套（如
.block__element--modifier算 1 层，.block .block__element才算嵌套） - 禁止用 ID 或标签名作为样式钩子（
#header、button），它们天然不具备复用性
BEM命名如何直接对应高效选择器
BEM 的本质不是“起长名字”，而是把样式作用域显式编码进类名里，让选择器天然扁平、无歧义、可预测。一个 button 组件的 BEM 类名 btn btn--primary btn--large，对应的 CSS 就该是 .btn、.btn--primary、.btn--large 三个独立规则，而不是 .btn.btn--primary 合写或嵌套在 .form .btn 里。
使用场景：当你需要复用同一套按钮样式到弹窗、表单、侧边栏时，BEM 类名不带上下文，就能直接复制粘贴；当设计系统升级圆角尺寸，只需改 .btn--large 的 border-radius，不会波及其他地方。
立即学习“前端免费学习笔记（深入）”；
-
block是独立组件（如card），block__element是其内部不可拆分的部分（如card__title），block--modifier是状态变体（如card--shadowless） - 不要为“位置”加 modifier，比如
card--top—— 位置应由布局类（如u-mt-xl）控制，不是组件职责 - 避免
block__element__subelement，这说明结构过深，应该拆成新 block
怎么用工具和约定守住BEM边界
光靠自觉很难坚持，得靠约束。PostCSS 插件 postcss-bem-linter 可以静态检查类名是否符合 BEM 规则，比如报错 .card-header-title（用了中划线连接多单词，但没用 __ 表示 element）；ESLint 插件 eslint-plugin-css-modules 能防住你在 JS 里手写 className="card card-header" 这种非 BEM 写法。
容易踩的坑：团队里有人图快，在 Vue 的 <style scoped></style> 里写 .card :deep(.title)，以为“scoped 就安全”，其实破坏了 BEM 的命名即作用域原则，也增加了未来迁移成本。
- Webpack/Vite 配置中启用
postcss-bem-linter，CI 阶段失败即阻断 - 所有组件根元素 class 必须是 block 名（如
<div class="search-form">），禁止用 <code>search-form__wrapper - 第三方 UI 库（如 Element Plus）的 class 不纳入 BEM 约束，但要用
:where(.el-button) { ... }隔离作用域，防止污染 - 用
[data-theme="dark"] .icon替代.theme-dark .header .icon - 用
.card.is-collapsed > .card__body（仅一层子选择器）替代.card.is-collapsed .card__body（后代选择器） - 慎用
:is()和:where()，它们虽简化写法，但若内部包含低效选择器（如div p span），依然拖慢匹配速度
遇到必须嵌套的场景怎么办
真实项目总有例外：主题色切换要影响子组件颜色、暗黑模式下全局调整图标 fill、或者 legacy 页面无法重构。这时宁可用明确的顶层开关类（如 theme-dark），配合属性选择器，也不要用深层嵌套。
性能影响很实在：.theme-dark .icon 比 .theme-dark .header .nav .icon 快 3 倍以上（实测 Chromium DevTools 的 Layout 阶段耗时）。而且前者改起来有迹可循——搜 theme-dark 就知道所有受控区域。
最常被忽略的一点：BEM 不是目的，避免隐式依赖才是。哪怕你没用双下划线，只要每个类名都表达完整语义、不靠父级存在才生效，就已经走在高效路上了。
