bem本身不支持懒加载，仅规范类名；懒加载需构建工具或运行时策略实现，bem通过唯一块名避免样式冲突，确保每个css文件只含对应模块样式且不混入全局规则。
BEM 本身不支持、也不负责懒加载 —— 它只管类名怎么写，不管资源何时加载。 想靠 block__element--modifier 触发 CSS 文件异步加载，行不通。真正能做懒加载的是构建工具（如 Webpack、Vite）或运行时策略（如 loadCSS、CSSStyleSheet.insertRule），BEM 只能在命名层面配合这些机制，避免冲突、保证作用域干净。
为什么 BEM 类名必须和懒加载的 CSS 文件一一对应
懒加载本质是按需注入样式块，如果多个模块共用 button 这种泛化类名，一个动态插入的 button.css 可能覆盖全局所有 .button，导致侧边栏按钮突然变色、弹窗按钮丢失圆角。BEM 强制你把上下文带进类名，比如 checkout-form__submit-btn 和 comment-section__reply-btn，这样每个懒加载的 CSS 文件只需声明自己的完整路径，不会误伤其他模块。
- 构建时，每个组件目录下放一个
index.module.css，类名由工具自动加哈希或前缀，但语义仍需符合 BEM（如CheckoutForm__submitBtn） - 手动拆包时，CSS 文件名建议与 Block 名一致：
user-profile.css只含.user-profile、.user-profile__avatar等类，不混入.card或.modal - 禁止在懒加载 CSS 中写全局重置规则（如
button { ... }），所有样式必须绑定到明确的 BEM 块路径上
React + dynamic import 场景下，BEM 类名如何避免 SSR 与 CSR 不一致
服务端渲染时若未提前加载某模块的 CSS，而客户端又用 dynamic(() => import('./UserProfile')) 异步拉取，可能出现闪动或样式错位。关键不是 BEM 写法，而是类名生成逻辑是否同步 —— 如果服务端用 user-profile，客户端却因构建配置差异生成 userProfile（驼峰）或 user_profile（下划线），就彻底失效。
- 确保 SSR 和 CSR 使用同一套类名生成器：推荐用
clsx或classnames配合常量对象，如const BLOCK = 'user-profile'，所有类名拼接基于它 - 禁用 CSS-in-JS 库的随机哈希（如 Emotion 默认行为），改用
labelFormat: '[local]'或直接关掉 label - 在
useEffect中动态加载 CSS 时，检查document.querySelector('.user-profile')是否已存在，避免重复插入同名样式表
用 @layer + BEM 实现 CSS 加载优先级控制
现代 CSS 的 @layer 能定义层叠顺序，但它和 BEM 是正交关系：BEM 确保类名不撞车，@layer 确保即使撞了也能按预期覆盖。懒加载的模块 CSS 必须显式声明所属 layer，否则可能被 base 层样式压住。
- 基础层（base）放重置、字体、z-index 变量，
@layer base，全局最先加载 - 组件层（components）放所有 BEM 模块，每个文件开头写
@layer components;，懒加载时也保持这个声明 - 主题层（theme）放颜色、间距等变量，
@layer theme，最后加载，可覆盖 components 中的硬编码值 - 不要在懒加载 CSS 里漏写
@layer声明 —— 缺失时浏览器会把它归入未命名层，层叠优先级不可控
最容易被忽略的一点：BEM 不是字符串拼接游戏，懒加载也不是把 CSS 拆成小文件就完事。真正卡点在于构建产物中，每个 .user-profile__avatar 对应的 CSS 规则，是否真的只存在于 user-profile.css 里，且该文件只在 UserProfile 组件被 import 时才进入打包图谱。否则，命名再规范，也是白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
