别从学工具开始，先解决项目中样式冲突、响应式异常、主题色难维护三大痛点；按需选Sass（适合多主题/断点复用但需编译）或CSS变量（零编译、JS可读、暗色模式友好）；PostCSS是现代CSS默认基建，必用autoprefixer等插件；Tailwind适合设计师协作但需接受类名即设计语言，并规范@layer分层。
直接上结论：别从“学工具”开始，先盯住你正在写的项目里最痛的三个点——样式冲突改不动、响应式调半天不对、主题色换一次全站找变量——然后按需选工具，不是按热度。
怎么判断该用 Sass 还是 CSS 变量？
如果你团队还在手写 .btn-primary、.card-header 这类类名，且每次改圆角或主色都要 grep 全局搜，说明你真正缺的不是预处理器，而是变量抽象层。
- Sass 适合已有大量嵌套/复用逻辑（比如多主题 + 多断点组件），但要接受编译链路和
@import管理成本 - CSS 变量（
:root { --primary: #3b82f6; }）零编译、支持 JS 动态改、暗色模式切换只要切一个 class，适合中小型项目或渐进升级 - 坑：Sass 变量不能被 JS 读取；CSS 变量不支持在
@media外做条件计算（比如calc(var(--gap) * 2)在 Safari 旧版会失效）
PostCSS 不是“可选项”，是现代 CSS 的默认基础设施
哪怕你只用原生 CSS，只要项目跑在 Webpack/Vite 里，大概率已悄悄用了 PostCSS —— 它干的是“浏览器兼容性兜底”的脏活。
- 必装插件：
autoprefixer（补-webkit-前缀）、postcss-preset-env（让你写color-mix()或:has()这种新语法） - 别自己写配置：Vite 默认已集成，只需在
postcss.config.js里加一行plugins: [require('autoprefixer')] - 坑：如果用了 Tailwind，它的
tailwindcss插件必须放在autoprefixer之前，顺序错会导致前缀漏加
Tailwind 到底适不适合设计师协作？
适合，但前提是设计师接受“类名即设计语言”——px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 就是间距、圆角、色值、交互态的完整描述。
立即学习“前端免费学习笔记（深入）”；
- 优势：Figma 插件能双向同步颜色/间距 token；开发改样式不用猜语义，直接搜类名
- 真实限制：它不解决布局逻辑（比如“三栏等高”仍要靠 Flex/Grid），也不能替代设计系统文档
- 坑：团队没约定好
@layer分层（base/components/utilities），很快会陷入text-sm text-base text-lg并存的混乱
最容易被忽略的一点：工具链越重，debug 成本越高。当你在浏览器里看到一个奇怪的 margin，要能快速判断这是来自 normalize.css 的重置、Tailwind 的 space-y-4、还是某个 Sass mixin 的副作用——而不是先怀疑是不是自己眼花了。
