新手卡在“不知道从哪开始”是因为缺乏结构锚点，CSS框架通过固化布局模式提供可组合类名，帮人跳过从零设计结构；选框架需按项目类型：静态页用Bootstrap 5，React/Vue项目选Tailwind CSS，纯CSS方案试Bulma；用框架时需注意默认样式干扰、类名嵌套过深、响应式断点滥用；当结构无法抽象、性能受损或团队统一CSS-in-JS时应弃用框架。
为什么直接写 CSS 容易卡在“不知道从哪开始”
新手盯着空白编辑器，想写个导航栏却连 display: flex 都不敢加，不是语法不会，而是缺一个「结构锚点」——不知道哪些区域该用什么容器、哪些元素该套什么类名、间距和颜色怎么才不突兀。CSS 框架（比如 Bootstrap、Tailwind、Bulma）本质是把常见布局模式固化成可组合的类名，帮你跳过“从零设计结构”这步。
它不教你怎么写 CSS，但教你「页面长什么样」该对应「代码怎么组织」。
选框架别看名气，先看你的项目类型
-
要快速出静态宣传页、后台管理页原型：用
Bootstrap 5（带完整组件 + 网格系统），它的 .container、.row、.col-md-6 能立刻撑起响应式骨架
-
做 React/Vue 项目，或想精细控制样式：选
Tailwind CSS，靠 flex、gap-4、bg-blue-500 这类原子类拼布局，改起来快，也不容易污染全局
-
讨厌 JS 依赖、只想要纯 CSS 解决方案：试试
Bulma，零 JS，全靠 is-flex、columns、box 这些语义化类名
Bootstrap 5（带完整组件 + 网格系统），它的 .container、.row、.col-md-6 能立刻撑起响应式骨架 Tailwind CSS，靠 flex、gap-4、bg-blue-500 这类原子类拼布局，改起来快，也不容易污染全局 Bulma，零 JS，全靠 is-flex、columns、box 这些语义化类名 别一上来就配 PostCSS 或写自定义 theme——先用 CDN 引入，把 navbar、card、hero 这几个最常用的结构跑通再说。
用框架时最容易忽略的三件事
- 框架默认样式会干扰你理解原生行为：比如
Bootstrap 给所有 button 加了 border-radius 和 box-shadow，导致你误以为“按钮就该这样”，建议打开浏览器 DevTools，关掉框架 CSS，对比看原始渲染效果
- 类名嵌套过深 = 结构失控：像
class="container-fluid bg-light p-3 rounded shadow-sm" 看似方便，但后期改背景色时得删掉整个类串，不如拆成 class="card" + 自定义 CSS 变量控制主题
- 响应式断点不是越多越好：
Tailwind 默认有 sm/md/lg，但如果你的页面根本不需在 iPad 上特殊处理，就别硬套 md:flex-row，先用 flex-col 写死，跑通再加断点
.hero {
@apply bg-gray-50 py-12 px-4;
}
.hero-content {
@apply max-w-4xl mx-auto text-center;
}什么时候该扔掉框架，手写关键 CSS
Bootstrap 给所有 button 加了 border-radius 和 box-shadow，导致你误以为“按钮就该这样”，建议打开浏览器 DevTools，关掉框架 CSS，对比看原始渲染效果 class="container-fluid bg-light p-3 rounded shadow-sm" 看似方便，但后期改背景色时得删掉整个类串，不如拆成 class="card" + 自定义 CSS 变量控制主题 Tailwind 默认有 sm/md/lg，但如果你的页面根本不需在 iPad 上特殊处理，就别硬套 md:flex-row，先用 flex-col 写死，跑通再加断点 当你要实现的结构在框架里找不到对应抽象（比如斜切卡片、不规则网格、文字沿路径排布），或者性能明显变差（首屏加载多 200KB CSS），又或者团队已统一用 CSS-in-JS ——这时候框架就成了累赘。
立即学习“前端免费学习笔记（深入）”；
真正卡住新手的，从来不是“会不会写 margin”，而是“该不该在这里加 margin”。框架给的是答案草稿，而你需要做的，是读一遍它的源码里 .card 怎么定义 padding 和 border，然后照着抄三遍，再删掉一行试试效果。结构感，是在删改中长出来的。
