应使用 Sass/Less 替代原生 CSS 以支持变量、嵌套和 mixin；配合 PostCSS 实现自动前缀与新特性降级；通过 Webpack/Vite 构建工具链实现热更新；中大型项目需结合 CSS-in-JS 或原子化 CSS 解决样式隔离问题。
用 Sass 或 Less 替代原生 CSS 写样式
原生 CSS 缺乏变量、嵌套、混合（mixin）等能力，重复写 color、border-radius、媒体查询时极易出错且难维护。Sass（.scss）和 Less 提供了真正可用的编程能力，不是“语法糖”而是生产力刚需。
- 变量统一管理主题色：
$primary-color: #007bff;，改一处全项目同步 - 嵌套写法贴近 DOM 结构，但注意别嵌套超过 3 层，否则生成的选择器过长，影响性能和可读性
- 用
@mixin（Sass）或.button-style()（Less）封装按钮、阴影、响应式断点逻辑，避免复制粘贴 - 注意：Sass 的
@import已被弃用，改用@use和@forward，避免全局污染和重复编译
用 PostCSS 自动补全 CSS 属性与兼容性
写 display: flex; 后不用手动加 display: -webkit-box; ——PostCSS + autoprefixer 插件能根据 browserslist 配置自动注入前缀。它不只是“加前缀”，更是现代 CSS 的运行时转换层。
- 必须配
browserslist（写在package.json或独立文件里），例如："> 1%", "last 2 versions", "not dead"，否则autoprefixer不知道该兼容谁 - 配合
postcss-preset-env可提前用color-mix()、:has()等新特性，编译成当前浏览器能跑的代码 - 不要把 PostCSS 当成“替代 Sass 的方案”——它不处理变量或嵌套，定位是“CSS 转换管道”，应和 Sass/Less 配合使用（先编译预处理器，再走 PostCSS）
用构建工具链串联预处理 + 自动化 + 实时重载
手动执行 sass input.scss output.css 或每次改完点浏览器刷新，早该淘汰了。现代开发需要的是保存即编译、错误即提示、样式即上屏。
- Webpack 用户：用
sass-loader+css-loader+style-loader（开发时注入<style>），配合webpack-dev-server实现 HMR（模块热替换），改一个padding不刷新页面 - Vite 用户：开箱支持
.scss、.less和 PostCSS，无需额外配置；但要注意vite.config.ts中若自定义css.postcss，需返回完整插件数组，不能只写autoprefixer - 警惕 source map 错位：如果 Chrome DevTools 里显示的行号总差几行，大概率是 loader 链中某个没开启
sourceMap: true，比如css-loader或sass-loader
用 CSS-in-JS 或原子化 CSS 应对组件级样式隔离难题
当项目进入中大型阶段，CSS 全局作用域带来的命名冲突、样式泄漏、复用困难会突然爆发。这时候光靠 BEM 或 CSS Modules 不够，得选更结构化的方案。
立即学习“前端免费学习笔记（深入）”；
- CSS Modules（如
Button.module.css）适合 React/Vue 单文件组件，但无法跨组件复用原子样式，且动态拼接类名易出错（className={`${styles.btn} ${props.disabled ? styles.disabled : ''}`） - 原子化 CSS（Tailwind、Windi）把样式拆成单职责类名：
text-sm font-bold p-2 bg-blue-500 hover:bg-blue-600，通过工具扫描源码按需生成 CSS，体积可控；缺点是 HTML 显得“胖”，需配合 IDE 插件补全 - CSS-in-JS（如 Emotion、Styled Components）天然支持动态样式和主题切换，但服务端渲染（SSR）时需额外处理关键 CSS 提取，否则首屏无样式
真正卡住效率的，往往不是“会不会用 PostCSS”，而是没想清楚：这个组件的样式是否会被复用？要不要响应主题变化？要不要支持 RTL？这些决策比选工具更重要。
