css模块化通过局部作用域、bem命名、组件级拆分和css变量统一，减少样式冲突与冗余，降低选择器匹配开销，避免无效重绘，从而间接提升渲染性能和稳定性。
渲染优化本身不直接由 CSS 模块化完成，但模块化能显著减少样式冲突与冗余，从而间接提升渲染性能和稳定性。核心在于避免无效重绘、降低选择器匹配开销、消除无用样式残留——这些都源于混乱的全局样式管理。
用局部作用域切断样式污染链
传统全局 CSS 中，一个 .btn 类可能被多个组件复用或覆盖，浏览器需在每次样式计算时遍历所有匹配规则，增加样式解析时间。CSS Modules（如 Button.module.css）在构建时将类名转为唯一哈希（如 Button_btn_abc123），确保：
- 每个组件的样式只作用于自身 DOM 节点，不触发跨组件重排重绘
- 删除组件时，对应样式自动失效，无“僵尸 CSS”拖慢渲染
- 浏览器无需比对高权重全局规则，样式层叠路径更短、更可预测
靠 BEM 命名+模块化双保险控制特异性
BEM（如 .card__title--large）本身不解决运行时冲突，但它与模块化协同时效果突出：
- 命名自带语义和层级，调试时一眼识别样式归属，避免盲目加 !important 或提高权重导致后续渲染逻辑紊乱
- 模块化编译后保留 BEM 结构（如 Card_card__title--large_xyz789），既防冲突又保可读性
- 杜绝 .red、.mt-16 等抽象工具类泛滥，这类类名易被多处复用，造成隐式样式耦合，增加布局抖动风险
按组件拆分文件，让 CSS 加载更精准
模块化天然支持“用时加载”，配合现代打包工具（Vite/Webpack）可实现：
- 组件级 CSS 随 JS 代码异步加载，避免首屏引入大量未使用样式
- 不同页面共用同一组件时，其模块化样式只打包一次，不重复注入
- 服务端渲染（SSR）中，仅注入当前页面实际用到的模块样式，减少 HTML 体积与客户端样式计算负担
结合 CSS 自定义属性统一变量，减少重复声明
模块化不排斥全局设计系统。推荐做法是：
- 在根级（如 :root）定义 CSS 变量（--color-primary、--spacing-md）
- 各模块 CSS 中通过 var(--color-primary) 引用，而非重复写死值
- 变量集中管理，一处修改全站响应，避免因多处硬编码导致的样式不一致与冗余补丁
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
