多数小项目、内部工具或已有设计系统的团队无需CSS框架；真正适用场景是快速MVP、响应式栅格不熟、设计资源有限需UI一致；定制化高时框架反增成本。
项目要不要用 CSS 框架？先看这三类场景
多数小项目、内部工具、或已有成熟设计系统的团队，直接不用框架更省事。CSS 框架真正起作用的场景很具体：快速搭建 MVP、需要响应式栅格但团队不熟 Flex/Grid、设计资源有限但需保持 UI 一致性。如果项目里 button 和 modal 都要定制到像素级，Bootstrap 或 Tailwind 的默认样式反而会增加重置成本。
Tailwind 适合什么人？别被“ utility-first”带偏了
Tailwind 不是万能加速器——它适合有明确设计规范、前端主导 UI 实现、且愿意约束 class 使用方式的团队。常见误用：把 @apply 写成 CSS 预处理器替代品，或者在组件里堆砌 md:p-4 lg:px-8 xl:pr-12 导致可维护性骤降。实际建议：
- 用
tailwind.config.js的theme.extend.spacing统一控制间距阶梯，别依赖默认的1, 2, 3... - 对高频组合（如带 icon 的按钮）抽成
@layer components，而非无脑重复写 utility class - 禁用
!important（通过important: false关闭），否则和第三方组件库冲突时极难调试
Bootstrap 5 还值得选吗？关键看这几个配置项
Bootstrap 5 移除了 jQuery 依赖，但它的栅格系统和断点逻辑仍高度耦合。是否选用，取决于你能否接受它的约束：
-
$enable-negative-margins: true—— 开启后才能用mt-n3这类负边距，很多布局技巧依赖它 -
$enable-responsive-font-sizes: true—— 若项目需流体字号，这个必须开，否则fs-1等类无效 - 删掉没用的模块：用
bootstrap/scss/forms就别引入bootstrap/scss/tooltip，否则 CSS 体积多出 12KB+
如果你只需要栅格和表单样式，bootstrap/scss/functions + bootstrap/scss/grid 单独 import 更轻量。
立即学习“前端免费学习笔记（深入）”；
小众框架如 Bulma、Spectre.css 哪些地方容易翻车
Bulma 的 is-flex-direction-column 类名长且语义模糊，实际开发中容易和自定义 flex 容器混淆；Spectre.css 的 .container 默认带 max-width: 1140px，但没提供响应式断点覆盖机制，移动端适配得手动覆盖 width。这类框架的问题不在功能少，而在扩展路径不透明：
- Bulma 的变量大多用
$variable而非 CSS 自定义属性，无法 runtime 切换主题 - Spectre.css 没导出 Sass 变量文件，想改主色只能全局搜索替换
#3c96ff - 两者都缺乏无障碍语义增强（比如
aria-current的自动注入），需额外补 JS
用小众框架前，先确认它是否提供 variables.scss 或 :root 可覆盖的 CSS 变量——这是后期维护的底线。
