单页应用css加载慢的根源在于样式未被有效约束，而非代码量大；bem解决命名冲突但不解决作用域问题，css modules才能实现真正局部化；按需引入需分路由级、组件级、状态驱动三种路径实施。
单页应用里 CSS 加载慢，不是因为写了太多样式，而是样式没被“管住”——全局污染、重复引入、服务端客户端状态错位、构建时没切片。BEM 和按需引入不是两个独立技巧，而是同一套约束：让每个类名有上下文，让每份 CSS 只在它该出现的地方出现。
为什么 import './Button.css' 在组件里仍然会全局生效
Webpack 或 Vite 默认把 import 进来的 CSS 当作“全局样式”处理，哪怕它写在一个 Vue/React 组件文件里。BEM 类名（如 .button__label）再规范，也挡不住这个 CSS 文件被抽成一个全局 main.css 后，影响所有页面。
- 检查你用的构建工具是否启用了 CSS Modules 或 scoped 样式支持；Vue 单文件组件要写
<style scoped></style>，React 项目得配css-loader?modules或直接用Button.module.css - 如果用了 Ant Design 或 Element Plus，
import 'ant-design-vue/dist/reset.css'这种写法是全局的，必须配合主题变量覆盖或 CSS 自定义属性隔离，不能靠 BEM 命名来“假装局部” - BEM 解决的是命名冲突，不是作用域问题；CSS Modules 才真正把
.btn编译成_btn_abc123这种哈希类名
按需引入 CSS 的三种实际路径
不是所有 CSS 都值得“按需”，关键看它是否绑定具体组件逻辑或路由场景。真正该拆的，是那些只在某个视图下才需要的视觉规则。
-
路由级 CSS：在懒加载路由中，用
import('./views/Dashboard.css')或动态require，配合 Webpack 的mini-css-extract-plugin抽离为单独 chunk，确保用户访问 /dashboard 时才下载这份样式 -
组件级 CSS：对高复用、低耦合的原子组件（比如
Tooltip、Modal），把样式和逻辑打包进同一个index.ts，用export const Tooltip = () => { ... }+import './Tooltip.css'，再由构建工具自动做 scope 处理 -
状态驱动 CSS：不要写
.button--loading然后手动加类，而是用 CSS-in-JS 库（如 Linaria 或 vanilla-extract）生成带哈希的类，并让 JS 状态直接映射到 className，避免 classList 操作遗漏或顺序错乱
BEM 修饰符和 disabled 属性不同步的典型报错
控制台看不到错误，但键盘用户能 tab 到按钮并回车——这就是 button--disabled 类存在但 disabled 属性缺失的后果。可访问性测试工具（如 axe-core）会直接标红。
- 别在 CSS 里写
.button--disabled:disabled，这等于要求两个条件同时成立，反而让样式失效 - 服务端渲染时，如果后端输出了
<button class="button button--disabled"></button>，但客户端 JS 初始化又执行一次btn.classList.add('button--disabled')，就可能造成 hydration 不一致，触发 React/Vue 警告 - 正确同步方式是封装一个 setter：
setButtonDisabled(el, value) { el.disabled = value; value ? el.classList.add('button--disabled') : el.classList.remove('button--disabled'); }
最难的不是写出 .card__header--compact，而是当新同学加了个 .card--highlighted 时，没人检查它是否已在 SSR 模板中声明、是否和 data-highlighted 属性联动、是否被 Webpack 正确标记为异步 chunk——BEM 和按需引入，本质都是团队契约，不是技术开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
