17370845950

别从学工具开始，先解决项目中样式冲突、响应式异常、主题色难维护三大痛点；按需选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 的副作用——而不是先怀疑是不是自己眼花了。