CSS框架不是逃避设计，而是将“如何让页面不难看”的高门槛问题转化为“如何选对组件、填对class”的可查文档问题；它封装了经验证的视觉决策（如圆角、阴影），提供响应式支持，并需理解class职责边界、渐进调试与合理定制。
用 CSS 框架不是逃避设计，而是把「怎么让页面不难看」这个高门槛问题，换成「怎么选对组件、填对 class」这个可查文档就能解决的问题。
为什么 Tailwind 或 Bootstrap 能快速救急
新手卡在设计上，往往不是配色或排版理论没学懂，而是缺乏视觉决策的上下文——比如“这个按钮该用什么圆角？”“卡片阴影多深才不突兀？”框架把这类决策提前封装好了，你只需要按语义选 btn-primary、card-shadow-md 这类 class，背后对应的是经过大量项目验证的数值和组合。
- Bootstrap 提供开箱即用的组件（
navbar、modal），适合需要快速搭出功能完整页面的场景 - Tailwind 是原子类，更灵活但需要稍多组合，比如
flex gap-4 p-6 bg-white rounded-xl shadow-sm一行就定义了布局、间距、背景、圆角和阴影 - 两者都默认适配响应式，
md:flex-row或col-md-6这类写法直接绑定断点，不用自己写媒体查询
别直接抄 demo，先搞清 class 的职责边界
很多新手复制了框架 demo，但改文字或加图片后布局崩了，原因常是没理解 class 的作用范围。比如：
-
container（Bootstrap）只提供水平居中+内边距，不控制宽度；真正限制宽度的是container-fluid或container-lg -
text-center（Tailwind）只居中文本，对子元素是div还是button完全没影响；要居中整个块，得用flex justify-center或grid place-items-center -
form-control（Bootstrap）只负责输入框样式，不包含 label 对齐逻辑；label 错位往往是忘了加form-label或没套mb-2类
从「改一个地方」开始调试，别一上来就重写
与其对着设计稿从零写 CSS，不如找一个最接近的官方示例，只动一处验证理解是否正确。比如：
立即学习“前端免费学习笔记（深入）”；
.my-card {
@apply bg-gray-50 p-6 rounded-lg border border-gray-200;
}
/ 想加 hover 效果？只加这一行 /
.my-card:hover {
@apply bg-white shadow-md;
}
上面这段 Tailwind + 自定义 class 的写法，比直接堆 hover:bg-white hover:shadow-md 在 HTML 里更易维护。关键在于：每次只验证一个变量（颜色？间距？交互？），避免同时改五处后不知道哪步出错。
- 修改前先看框架文档里该 class 的源码定义（比如 Tailwind 的
rounded-lg默认是0.5rem，不是4px） - 用浏览器开发者工具检查 computed styles，确认你写的 class 确实覆盖了框架默认值，而不是被权重更低的规则干掉了
- 删掉框架 CSS 文件，页面立刻变丑——这是好事，说明你依赖的正是它提供的基础视觉一致性
设计感藏在细节取舍里，框架只是帮你守住底线
框架能防止你写出文字重叠、按钮没 hover 状态、表单字段挤在一起这种基础错误，但它不会告诉你「这个数据卡片要不要加 icon」「空状态提示文案放左还是居中」。这些才是真正体现产品思考的地方。
建议把 80% 时间花在调整框架已有的 class 组合上，剩下 20% 用自定义 class 或少量 CSS 处理业务特有逻辑——比如给「已过期订单」加红色边框，这种需求永远无法靠通用 class 覆盖，但写三行 CSS 就能搞定。
