bem是spa中不依赖构建工具即可守住样式边界的唯一方案，因其通过block__element--modifier命名显式声明作用域，避免多组件共存时的隐式耦合与样式污染。
因为 SPA 的 DOM 长期驻留、多路由组件共存、状态频繁切换，BEM 提供的显式作用域和扁平选择器是唯一不依赖构建工具就能守住样式边界的方案。
为什么 SPA 里类名冲突比多页应用更隐蔽、更难修复
单页应用中，多个路由组件常被同时挂载（比如侧边栏 + 主内容区 + 浮层），Header 和 DashboardHeader 可能共存于同一 DOM 树；若都用 .title，浏览器根本不管它们来自哪个模块，只按加载顺序和权重决定谁生效。
-
.header__title和.dashboard-header__title从命名上就切断了隐式耦合——类名即作用域，无需依赖构建工具或运行时隔离 - 常见错误现象：
margin越调越大、审查元素时发现样式来自完全无关的文件、改一个按钮颜色结果所有button都变了 - 这些不是 bug，是缺乏显式作用域声明的必然结果
为什么 BEM 在 SPA 中不靠 CSS Modules 也能起效
BEM 解决的是「人眼可读性」和「协作边界」，CSS Modules 解决的是「编译期作用域」。即使开了 CSS Modules，如果类名还是叫 title、list，那在 DevTools 的 class 列表里依然难定位、易误读。
- 有人写
Button.module.css，里面却定义.root和.label—— 这等于白开了 CSS Modules，BEM 约束全失效 - 用
styled-components封装组件，但又在 HTML 里手动加card__body类——此时样式归属分裂：一部分由 JS 控制，一部分由外部 CSS 文件控制 - 第三方库（如 Ant Design）已自带类名体系，强行套 BEM 包裹（如
my-button__inner）会增加冗余，且无法享受其主题变量体系
为什么 BEM 的单类名选择器在 SPA 中更稳
SPA 页面生命周期长，DOM 节点反复复用、移动、重挂载，层级选择器（如 .modal .content .title）极易因结构微调而失效；而 .modal__title--large 只认类名，挪位置、改标签、抽组件，只要类名还在，样式就生效。
- 浏览器匹配是从右往左的：
.card .card__title会让它先找所有.card__title，再逐级向上查父级是否为.card；DOM 越深，回溯链越长 -
.card__title--hovered是单类名，浏览器直接查 class 属性哈希表，一次命中，没有回溯 - 错误写法：
.card:hover .card__title→ 应改用 JS 切换.card--hovered，再写.card--hovered .card__title（仍是可控的两层）
真正难坚持的不是写 __ 和 --，而是拒绝用标签选择器、拒绝嵌套、拒绝在类名里塞样式值（比如 --bg-blue）。每一条都在堵一个真实发生过的线上样式事故入口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
