直接写 CSS 易致风格不统一，因缺乏类名规范、设计变量体系和组件封装边界；需通过语义化原子类、可接管的主题变量及按需引入机制实现统一。
为什么直接写 CSS 容易导致页面风格不统一
手写 CSS 时，button、input、card 这类组件在不同页面里常出现命名不一致、尺寸不一致、间距不一致的问题。比如一个按钮用 .btn-primary，另一个页面却叫 .primary-btn；又或者同一语义的灰色边框，在 A 页面用 #ccc，B 页面用 #d1d5db —— 这些细节累积起来，视觉和维护成本就上去了。
根本原因不是“没写好”，而是缺乏约束机制：没有强制的类名规范、没有预设的色值/间距/圆角体系、也没有组件级的样式封装边界。
选框架前先明确三个约束条件
不是所有 CSS 框架都适合你的项目。判断标准不是“好不好看”，而是能不能满足这三点：
-
class名必须语义清晰且不可随意覆盖（例如btn+btn-sm+btn-outline组合稳定） - 主题变量（如
--color-primary）必须可被项目级 CSS 变量接管，不能硬编码颜色值 - 必须支持按需引入（例如只加载
button和form相关样式，不打包整个框架）
像 Bootstrap 5 的 scss 版本、Tailwind CSS 的 config.js、以及现代轻量框架如 Windi CSS 或 UnoCSS 都满足这些。但 Bootstrap 的 CDN 版本或早期纯 CSS 发布包就不行——它把所有样式打成一个大文件，且变量不可控。
立即学习“前端免费学习笔记（深入）”；
如何让现有项目平滑接入 Tailwind CSS
Tailwind 是目前最可控的统一方案，关键在于「不写新 class，只用已有原子类」。迁移不是重写，而是逐步替换：
- 先在
tailwind.config.js中复用你现有的设计系统：把品牌色、字体栈、间距阶梯（spacing）、圆角（borderRadius）全部映射进去 - 用
@layer components封装高频组合，比如：@layer components { .btn { @apply inline-flex items-center px-4 py-2 font-medium rounded-md; } .btn-primary { @apply bg-blue-600 text-white hover:bg-blue-700; } } - 禁用
!important（在配置中设important: false），避免旧 CSS 覆盖原子类 - 对遗留 HTML，用 PostCSS 插件
postcss-tailwind-classes扫描并提示哪些 class 可被替换成标准原子类
别忽略 CSS 自定义属性（CSS Custom Properties）的兜底作用
框架再统一，也挡不住临时加个「运营弹窗」要换主题色的需求。这时候靠改 class 不现实，得靠运行时切换 CSS 变量：
:root {
--color-bg: #ffffff;
--color-text: #1f2937;
}
[data-theme="dark"] {
--color-bg: #111827;
--color-text: #f9fafb;
}
然后所有组件样式都基于这些变量写，例如：background-color: var(--color-bg)。这样哪怕用了 Tailwind，也能通过 JS 切换 data-theme 属性实现整站换肤，而不用动任何 class 名。
真正难的不是选框架，而是守住变量层和类名层这两条线：变量管「变什么」，类名管「怎么用」。漏掉哪一条，风格都会在半年后悄悄分裂。
