小项目无需 Tailwind 或 Bootstrap；纯静态页等场景用 PostCSS 插件+手写结构化 CSS 更高效，关键在统一单位、BEM 命名、CSS 变量及按需抽象。
小项目真没必要上 Tailwind 或 Bootstrap
纯静态页面、内部工具页、单页活动页这类场景，引入完整 CSS 框架反而拖慢开发节奏。Tailwind 的 @layer 和 @apply、Bootstrap 的 container / col- 类名体系，会强制你适应它的设计约束，而小项目往往只需要 3–5 个响应式卡片+一个表单+适配移动端。
用 PostCSS + 简单插件就能替代大部分框架能力
比如实现响应式断点、自动加前缀、变量复用，根本不需要整套工具链。重点不是“要不要编译”，而是“编译什么”：
-
postcss-preset-env：支持color-mix()、@custom-media、嵌套写法（&:hover）等现代语法，不依赖框架 -
postcss-custom-properties：让:root { --primary: #3b82f6; }真正生效，兼容 IE11 可选开降级 - 手动写个
media.css文件，只放三行：@custom-media --sm (width >= 640px); @custom-media --md (width >= 768px); @custom-media --lg (width >= 1024px);
然后在任意地方用@media (--md) { ... }
直接手写 CSS 时，这几个习惯能省 80% 后续维护成本
不用框架不等于裸写，关键在结构控制力：
- 所有尺寸单位统一用
rem，根字体设为html { font-size: clamp(14px, 0.875vw + 12px, 16px); }，兼顾可读性与响应性 - 颜色不写死值，用
hsl(210 70% 55%)替代#3b82f6，后续调色只需改一个数字 - 组件类名严格遵循
BEM命名：比如card、card__header、card--compact，避免样式污染和意外覆盖 - 把重用率高的规则抽成
utility.css：比如.visually-hidden、.sr-only、.truncate，控制在 10 行以内
什么时候该考虑引入轻量工具？看这三点信号
不是按项目大小判断，而是看实际协作和演进压力：
立即学习“前端免费学习笔记（深入）”；
- 团队里有人开始反复复制粘贴同一段 flex 布局代码超过 3 次 → 该建
flex.css片段库了 - 发现同一个按钮在 4 个页面用了不同圆角/阴影/过渡时长 → 需要定义原子类如
.btn+.btn--sm+.btn--outline - 设计师给的 Figma 文件里明确标出「间距系统 = 4/8/12/16/24/32」→ 直接转成
--space-1: 0.25rem;等 CSS 变量，比任何框架都准
真正卡住小项目进度的，从来不是“没用框架”，而是过早抽象、命名随意、单位混用。先写清楚再压平，比一上来就配 tailwind.config.js 实际得多。
