新项目是否上CSS框架取决于实际问题而非流行度；静态或组件化高项目可免框架，简单项目用PostCSS+utility class即可；Tailwind思路可借鉴但不必全量引入；管理后台优先选Chakra UI或Naive UI；IE11兼容选Bootstrap 4.6并精简引入。
新项目要不要上 CSS 框架，取决于你实际要解决的问题——不是“哪个最火”，而是“哪个能少写、少改、少踩坑”。纯静态页面或组件化程度高的项目，很可能根本不需要完整框架。
项目只有几个页面，且交互简单
直接用 PostCSS + cssnano + 手写 utility class 就够了。Tailwind 的核心思路可以抄，但不必引入整个 tailwindcss 工具链。比如定义一组响应式间距：.p-2、.p-4、.md:p-6，用 @apply 或原生 :is() 组合即可。
容易踩的坑：
- 过早引入
tailwind.config.js并开启全部插件，导致打包体积暴涨 - 把
@layer utilities写错位置，导致自定义 class 不生效 - 误以为所有 utility class 都该响应式，结果移动端多出一堆无用媒体查询
团队已有 React/Vue 基础，要快速搭管理后台
选 Chakra UI（React）或 Naive UI（Vue），它们自带语义化 CSS-in-JS 或 scoped CSS，样式不会全局污染，主题切换也只需改一个对象。比手写 BEM + postcss-preset-env 省心得多。
关键点：
-
Chakra UI的Box和Stack组件默认带 margin collapse 处理，不用再写* + *重置 -
Naive UI的n-config-provider支持运行时换肤，但需注意css-vars-hook在 SSR 下可能不触发 - 两者都依赖设计 token，别在组件里硬写
px值，统一走space.2或sizeSmall
需要兼容 IE11 或嵌入老系统 iframe
绕开所有现代框架。用 Bootstrap 4.6（非 5.x），它仍保留 float 布局和独立 grid CSS 文件，不依赖 flex 或 gap。别碰 Bootstrap 5 的 data-bs-* 属性，IE 里解析会失败。
实操建议：
- 只引入
bootstrap-grid.css和reboot.css，禁用bootstrap.css全量文件 - 用
.d-none .d-md-block控制显隐，别用visibility: hidden模拟隐藏，IE 对 visibility 继承处理异常 - 表单控件必须加
form-control类，否则 IE 下input高度计算错误
.container {
max-width: 1200px;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
<p>.row {
margin-left: -15px;
margin-right: -15px;
}</p><p>.col-md-6 {
float: left;
width: 50%;
padding-left: 15px;
padding-right: 15px;
}</p>
真正难的不是选框架，是判断哪些样式逻辑该进 JS、哪些该保留在 CSS、哪些压根不该抽象——比如深色模式切换，用 @media (prefers-color-scheme: dark) 直接写 CSS 更稳，比靠 JS 切类名少一层故障点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
