BEM不能实现按需加载，它仅通过命名约定确保样式不冲突；真正控制加载时机的是构建工具或运行时机制（如import()、React.lazy），BEM只保障加载后的样式隔离与归属明确。
不能靠 BEM 实现按需加载——它只管命名，不负责加载逻辑。真正控制“哪些样式在何时加载”的，是构建工具或运行时机制，BEM 只确保加载进来的样式不互相打架。
为什么 BEM 本身不提供按需加载能力
BEM 是一套类名命名约定，运行时不存在、编译时不生成额外代码、也不影响资源请求时机。它解决的是“样式加载进来后怎么不冲突”，而不是“要不要加载”或“什么时候加载”。import './modal.module.css' 能触发按需加载，但 .modal__overlay 这个类名本身不会让浏览器跳过加载。
- BEM 类名在 HTML 和 CSS 中都是静态字符串，浏览器解析时无感知
- Webpack/Vite 的 code splitting 靠
import()或React.lazy触发，和类名写法无关 - 写成
.user-modal__content和.user-modal-content对打包体积、HTTP 请求次数毫无影响
如何让 BEM 和按需加载协同工作
关键在于把 BEM 命名绑定到可拆分的模块单元上，再由构建工具识别并切分。每个 BEM Block 应对应一个物理文件或组件边界。
- 每个 Block 单独建文件：比如
search-form.module.scss里只定义.search-form、.search-form__input等，不混入其他模块规则 - 组件内 import 对应模块：React 中
import styles from './SearchForm.module.css'，Vue 中<style module src="./SearchForm.module.css"> - 路由级拆分时，确保路由组件所用的 BEM 文件不被入口 chunk 提前引入：Vite 中用
import('./views/UserModal.vue')，Webpack 中用React.lazy(() => import('./UserModal')) - 避免跨模块引用：不要在
header.module.css里写.search-form__input，否则构建工具无法安全剔除该样式
容易踩的坑：BEM 命名反而破坏按需加载
当 BEM 使用方式违背模块边界时，会无意中让样式“粘连”，导致本该懒加载的 CSS 被提前打包进主包。
立即学习“前端免费学习笔记（深入）”；
- 全局复用 Block 名但分散在多个文件：比如
.button定义在shared.css，又在card.module.css里用.card__action .button—— 构建工具会把shared.css提取进 vendor chunk，失去按需意义 - SCSS 中滥用
@import聚合：在入口index.scss里@import 'components/button'; @import 'components/modal';，等于全量引入，BEM 再规范也救不了 - 动态拼接类名绕过模块化：JS 中写
className={`search-form__${type}`}，但type值来自 props 且未被静态分析，可能导致构建工具不敢剔除未用的.search-form__advanced规则
真正起作用的不是 .block__element 这串字符，而是它背后是否对应一个可独立加载、无隐式依赖的文件单元。BEM 让你一眼看出“这个样式属于谁”，而构建配置决定“这个样式要不要现在加载”。两者缺一不可，但职责分明。
