17370845950

根本差别在于是否愿为一致性、响应式适配、重复样式收敛持续手动维护；手写CSS易失控因命名冲突、断点不一、单位混乱、伪类覆盖难；Tailwind用原子类规避问题但HTML变冗长；Bootstrap省设计决策时间但受限于其设计边界。

原生写 CSS 和用框架，根本差别不在“谁更高级”，而在于你愿不愿意为「一致性」「响应式适配」「重复样式收敛」这些事，持续花时间手动维护。

为什么手写 CSS 很快就失控？

不是写不出来，是改起来越来越难。一个 .btn 类在 3 个页面里被复制粘贴、微调颜色/间距/圆角，半年后没人记得哪版才是“主版本”。你改 button.css，但 form-page.html 里那个按钮还挂着 style="margin-left: 8px" 的内联样式——它赢了优先级，也赢了你的调试时间。

• 命名冲突：两个开发者都定义了 .card，但一个指信息卡片，一个指支付卡组件
• 响应式断点不统一：@media (max-width: 768px) 在 A 文件里是移动端，在 B 文件里却是平板端
• 间距单位混乱：有人用 rem，有人用 px，还有人直接写 20（忘了单位）
• 伪类覆盖难：想让 :hover 下的 .btn-primary 变深色？得翻出所有相关选择器链，确认没被更具体的选择器压住

Tailwind 这类原子化框架怎么绕过这些问题？

它不提供 .btn 或 .card 这种语义类，而是把样式拆成最小可组合单元，比如 px-4、bg-blue-500、hover:bg-blue-600。这意味着：

• 没有“组件样式源码”要读——类名即含义，不用查文档也能猜八成
• 不存在“覆盖框架样式”的需求：你不用改框架，只管用新类名组合
• 响应式天然内建：md:text-lg 就是“中屏及以上才生效”，不用自己写媒体查询
• 打包时可 tree-shake：没用过的 text-9xl 或 inset-y-0 不会进最终 CSS

但代价也很实在：

Submit

比 Submit 长得多，HTML 显得“胖”。这不是 bug，是设计取舍。

Bootstrap 这类传统框架真正省的是什么？

它省的不是“写 CSS 的时间”，而是“做设计决策的时间”。你不需要纠结按钮圆角该是 4px 还是 6px，因为 .btn 已经定了；也不用反复验证栅格在 iOS Safari 下是否塌陷，因为 .row + .col-md-6 组合已经过千个项目锤炼。

• JS 插件是真省事：data-bs-toggle="modal" 比手写模态框的 backdrop、focus trap、esc 关闭逻辑快 10 倍
• 变量系统（如 Sass $primary）允许主题切换，但改完得全量编译，不能局部热更新
• 容易踩坑：直接覆盖 .btn 样式时，常漏掉 .btn:focus 或 .btn:disabled 状态，导致可访问性失败

框架不是银弹。Tailwind 让你掌控每个像素，但要求你有清晰的设计系统约束；Bootstrap 给你一套答案，但你要接受它的设计边界。最常被忽略的一点是：**无论选哪个，一旦项目进入维护期，CSS 的组织方式（比如要不要拆 components/ 目录、如何隔离第三方样式）比用不用框架影响更大。**