css模块化需用sass的@use/@forward实现作用域隔离，CSS自定义属性统一主题并规范命名，postcss通过browserslist和插件链保障兼容性，CSS Modules借助哈希类名解决选择器冲突。
如何用 CSS 预处理器实现样式模块化
模块化不是靠文件夹命名“假装”出来的，关键在作用域隔离和可复用单元。Sass 的 @use 和 @forward 是目前最稳妥的模块机制，它强制变量、混合宏（@mixin）、函数（@function）必须显式导入，避免全局污染。
团队中常见错误是仍用 @import 拼接样式，导致变量覆盖、编译顺序敏感、无法 tree-shaking。比如一个组件依赖 button.scss，但它的 $primary-color 被 theme.scss 里同名变量意外覆盖，调试时很难定位。
- 每个模块只暴露必要接口：用
@use "vars" as vars显式限定命名空间 - 禁止在
_index.scss中直接写样式规则，只做@forward或@use聚合 - 组件级样式文件（如
card.scss）应只@use它真正需要的工具模块，不引入整套设计系统
CSS 自定义属性（CSS Custom Properties）如何统一主题与运行时换肤
硬编码颜色值（如 #007bff）会让主题切换变成全量搜索替换。CSS 自定义属性是唯一原生支持动态更新、继承和 javaScript 读写的方案，但它不是“写一次就完事”的语法糖。
真正落地要解决两个问题：一是命名规范防止冲突，二是避免性能陷阱。比如把 --color-primary 定义在 :root 是合理的，但若在每个组件里重复定义 --color-bg，不仅冗余，还让 js 修改主题时需遍历所有节点。
立即学习“前端免费学习笔记（深入）”；
- 基础变量统一收口到
:root，按语义分层（--color-brand-primary、--space-unit-sm），不用功能名（如--btn-bg） - 组件内通过
var(--color-brand-primary, #007bff)提供降级色，不依赖 JS 注入才生效 - 避免在大量元素上高频设置自定义属性（如滚动中每帧改
--scroll-y），会触发重排
PostCSS 插件链如何保障跨团队样式兼容性与可维护性
光靠开发者自觉写 display: flex 不写 display: -webkit-box 是不可靠的。PostCSS 的 autoprefixer 必须配合明确的浏览器目标（browserslist 配置），否则团队 A 写的样式在团队 B 的构建环境中可能漏加前缀，上线后部分安卓 webview 崩溃。
更隐蔽的问题是插件顺序：比如 postcss-nested 必须在 autoprefixer 之前运行，否则嵌套语法还没展开就被处理了；又比如 postcss-custom-properties 若开启 preserve: false，会把自定义属性转成静态值，失去运行时换肤能力。
-
browserslist配置必须提交到仓库根目录，且与 CI 中的实际构建环境一致（不能本地开发用last 2 versions，CI 用ie 11） - 禁用
postcss-preset-env的自动降级（stage: 3），它会把gap强行转成margin模拟，破坏 Grid 布局语义 - 团队共用的 PostCSS 配置建议抽成独立包（如
@org/postcss-config），通过require引入，避免各项目手动 copy-paste
如何用 CSS Modules 防止选择器命名冲突
即使团队约定 BEM，也挡不住两个人同时提交 .btn--primary 却指向不同交互逻辑。CSS Modules 的局部作用域不是“锦上添花”，而是协作底线——它让 import styles from './Button.module.css' 返回的对象键名天然带哈希，styles.root 在编译后变成 Button_root__abc123，彻底隔离。
但滥用会导致调试困难：比如在 DevTools 里看到一堆哈希类名，却找不到对应源文件。这不是 CSS Modules 的问题，而是没配好 localidentName。
- 开发环境用
[name]_[local]_[hash:base64:5]，兼顾可读性与唯一性 - 禁止在
:global块里写复杂选择器（如:global(.header .title)），这等于主动撕开模块边界 - 需要全局覆盖的样式（如第三方 UI 库主题），单独建
overrides.css并用!important—— 这比在每个组件里加:global更可控
实际协作中最容易被忽略的，是把 CSS 工具链当成“配置完就一劳永逸”的黑盒。一旦出现样式异常，第一反应不该是查文档，而是检查当前项目的 postcss.config.js 是否被某次升级悄悄覆盖、browserslist 是否被 IDE 插件误删、或者某个新成员本地装了旧版 node 导致 PostCSS 版本不一致。这些细节不写进 README，就永远在救火。