直接用预处理器+postcss+工具库组合可减少40%以上重复样式书写量，关键在正确配置：sass变量和mixin统一管理易变值，嵌套不超过3层，@use替代@import，postcss需配browserslist和content路径，插件顺序须为源码→postcss→purgecss→压缩。
直接用预处理器 + PostCSS + 工具库组合，能砍掉 40% 以上重复样式书写量，构建速度取决于你是否跳过 sass 手动编译、是否漏配 content 导致 PurgeCSS 误删类——不是工具慢，是配置链断了。
用 Sass 变量和 mixin 替代硬编码值
Sass 不是“让 CSS 看起来更高级”，而是把颜色、间距、断点这些易变项从样式声明里抽出来，改一处全项目生效。嵌套别超 3 层，否则生成的选择器像 .header .nav .item .link:hover 这种，既难读又拖慢浏览器匹配速度。
-
$spacing-sm: 0.5rem;、$brand-blue: #007bff;这类变量统一放在_variables.scss里 - 按钮共用逻辑用
@mixin button-base()封装，而不是复制粘贴padding和border-radius - 避免
@import（已弃用），改用@use "variables" as *;防止命名污染
PostCSS 必须配好 browserslist 才能真正省事
写 display: flex; 后自动补 -webkit-box 不是魔法，是 autoprefixer 插件根据 browserslist 配置决定要不要加。没配或配错，要么前缀加多了（体积涨），要么漏加（老设备白屏）。
- 在
package.json里加字段："browserslist": ["> 1%", "last 2 versions", "not dead"] - PostCSS 不处理变量或嵌套，它只做“转换”：前缀、新语法降级、压缩都靠插件，别指望它替代 Sass
-
postcss-preset-env可提前用color-mix()或:has()，但得确认目标浏览器是否支持降级后输出
Tailwind/UnoCSS 的 class 要扫到才不被 PurgeCSS 删掉
开箱即用的 utility class 很爽，但生产环境启用 PurgeCSS 后，如果 content 配置漏了 JS 文件路径或组件模板，hover:scale-105 这种类就会消失——不是框架问题，是你没告诉它“这些字符串出现在哪”。
- Tailwind：必须在
tailwind.config.js的content数组里列全src/**/*.html、src/**/*.tsx等路径 - UnoCSS：对应配
content.preload或extractors，尤其注意 Svelte/Vue 的<style></style>块内字符串 - 别滥用
@apply封装 utility 类——它会丢失响应式断点控制，比如@apply md:text-lg hover:underline在小屏下也生效了
构建慢？先查是不是 Sass 没走热重载或 PostCSS 插件顺序错了
构建耗时超过 1s/次，大概率不是工具本身，而是构建链路卡在某个环节：Sass 编译没接入 Vite/Webpack 的 loader，或者 PostCSS 插件顺序颠倒（比如 cssnano 放 autoprefixer 前面，前缀就加不上）。
- Vite 用户确保
vite-plugin-sass-dts或原生sass依赖已安装，且.scss文件后缀被识别 - Webpack 用户检查
postcss-loader是否在css-loader之后、mini-css-extract-plugin之前 - PurgeCSS 类删除发生在最后阶段，若你用
cssnano压缩后再给 PurgeCSS 扫，它可能找不到原始类名——顺序必须是：源码 → PostCSS 处理 → PurgeCSS → 压缩
最常被忽略的点：团队没对齐 browserslist 和 tailwind.config.js 中的 screens，导致设计稿用 md 断点，代码里却只写了 sm 和 lg——这种不一致不会报错，但会让响应式失效得毫无征兆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
