直接写 .header .nav .item 会导致样式失控，因其将 DOM 结构耦合进样式逻辑，引发权重战争、移位失效、全局污染；应改用 BEM 独立类名如 header__nav 和 nav__item，禁用多层空格选择器。
为什么直接写 .header .nav .item 会导致样式失控
这种深度嵌套选择器看似结构清晰，实际会快速演变成“选择器权重战争”：后来的覆盖规则不得不加更多层级或用 !important，组件一挪位置就失效，测试时经常出现“明明改了 CSS，但页面没变”。根本原因是它把 DOM 结构耦合进了样式逻辑，而组件的真实使用场景（比如 Header 可能被用在弹窗、侧边栏甚至邮件模板里）根本不可控。
更麻烦的是，CSS 模块化工具（如 css-modules 或 vue-style-scoped）对这类嵌套基本无感——它们只处理顶层类名，内部层级照样全局污染。
实操建议：
- 把
.header .nav .item拆成独立语义类名，例如header__nav和nav__item，每个都带明确归属关系 - 所有样式作用于单个类名，禁止跨两层以上的空格选择器（即禁用
A B C） - 如果必须响应父子状态（如“导航收起时子项隐藏”），用 JavaScript 切换父容器的修饰符类，例如
nav--collapsed，再写nav--collapsed .nav__item—— 这里是单层嵌套，且修饰符可控
如何用 BEM 修饰符替代 :hover / :focus 等伪类的滥用
很多人写 .button:hover { background: blue; }，看起来没问题，但一旦组件需要“在禁用状态下也显示 hover 效果”（比如灰度按钮仍要高亮），或者要在 JS 中判断当前状态（如做无障碍焦点管理），纯伪类就抓瞎了。BEM 修饰符把状态显式暴露为类名，让样式、DOM、JS 三端对齐。
实操建议：
- 统一用
--表示修饰符，例如button--primary、button--disabled、button--hovered - 伪类只保留最基础交互反馈（如
:focus-visible做键盘聚焦轮廓），其余状态交由 JS 控制类名增删 - 避免修饰符堆叠歧义：用
button--primary.button--disabled而不是button--primary-disabled，前者可被单独移除，后者无法解耦 - 示例：默认按钮背景白，
button--primary设蓝底，button--disabled设透明度 0.5 并禁用指针 —— 三个类名正交，任意组合都有确定样式
当第三方组件库（如 Ant Design）和你自己的 BEM 类名冲突怎么办
Ant Design 的 .ant-btn 默认权重高，你写 .my-button--large 很可能盖不住它的 padding。这不是 BEM 失效，而是没分清“封装边界”：第三方组件的样式应视为黑盒，你的自定义必须通过它公开的扩展机制介入，而不是硬覆盖。
实操建议：
- 优先使用组件库提供的
className、prefixCls或 CSS-in-JS 主题变量（如 Ant Design 的theme配置）注入 BEM 类名 - 真要覆盖时，用属性选择器提高特异性但不破坏 BEM 规则：写
[class*="my-button"] .ant-btn而不是.my-button .ant-btn，避免依赖具体 DOM 结构 - 对 Web Components 或 Shadow DOM 组件（如 Lit），直接在
:host内写 BEM 类，外部选择器根本进不去，自然规避冲突 - 切记：覆盖第三方样式是临时方案，长期应推动上游支持 BEM 友好类名输出（比如提 PR 加
data-bem属性）
为什么 nav__item--active 比 .nav .item.active 更适合微前端场景
微前端中，子应用可能用 Vue，主应用用 React，各自 CSS 作用域隔离方式不同。用 .nav .item.active 这种依赖层级+类名的写法，一旦子应用启用了 CSS Modules，.item 类名被哈希成 _123abc，主应用写的覆盖规则立刻失效。
BEM 类名是静态、可预测、不依赖构建工具的字符串，只要命名约定一致，各端都能生成相同类名，JS 也能安全操作（el.classList.add('nav__item--active') 不怕哈希）。
实操建议：
- 所有 BEM 类名写死在 HTML 或 JSX 中，不通过 JS 拼接（避免大小写/连字符错误）
- 用 ESLint 插件
eslint-plugin-bem校验命名格式，防止误写成nav__item_active（下划线错用） - 构建时若需压缩类名（如 Taro 小程序），用
postcss-bem等工具做映射，而非直接替换，确保运行时类名仍符合 BEM 规范
真正难的不是写对 -- 和 __，而是团队每次新增组件时，能否忍住不写 .modal .content .title —— 那个瞬间的偷懒，会在三个月后某个嵌套路由里爆发成五层嵌套的权重 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
