CSS框架因预设大量样式导致冗余、选择器低效、响应式规则阻塞解析，天然难达极致性能；Tailwind需配置content裁剪、禁用未用变体、避免@layer绕过清理；Bootstrap 5须Sass源码定制导入；自研原子系统更轻但需工具生成、静态可分析、合并文件。
为什么 CSS 框架天然难满足极致性能要求
CSS 框架（比如 Bootstrap、Tailwind、Bulma）本质是「预设集合」：它把大量组件样式、响应式断点、工具类、状态变体提前写好，再通过选择器匹配应用。这和「极致性能」的核心诉求——最小化关键渲染路径（CRP）、零冗余、按需加载——直接冲突。
-
bootstrap.css默认 200KB+，即使压缩后，首屏真正用到的可能不到 5% - 所有框架都依赖通用选择器（如
.btn、.container），导致浏览器必须做更多 CSSOM 构建与匹配计算 - 响应式类（如
md:flex、lg:grid-cols-3）会生成大量未使用媒体查询规则，阻塞解析
不是框架写得差，而是它的设计目标本就不是“极致性能”——而是“开发效率”和“一致性”。
如何让 Tailwind 在生产环境接近极致性能
Tailwind 是目前最接近可调优到高性能的 CSS 框架，但默认配置下它照样拖慢首屏。关键在构建时彻底裁剪。
- 必须启用
content配置，精确声明 HTML/JSX 文件路径，例如：content: ["./src/*<em>/</em>.{js,jsx,ts,tsx,html}"] - 禁用所有未使用的变体（
variants已废弃，改用plugins和corePlugins控制），比如关掉hover、focus可减小 30% 输出体积 - 不要用
@layer components写全局组件类——它会绕过 PurgeCSS，导致无法删除 - 开启
optimizeUniversalSelectors: true（v3.3+），自动将*.btn类型规则转为更高效的.btn
示例错误写法：class="text-red-500 hover:text-red-700 md:text-lg" —— 如果项目里根本没鼠标悬停交互，hover: 规则全白加。
立即学习“前端免费学习笔记（深入）”；
Bootstrap 5 的 CSS 如何做到“只用 10% 代码”
Bootstrap 5 放弃了 jQuery，但 CSS 仍是全量打包。想压到极致，不能靠 CDN 引入 bootstrap.min.css，而要走源码定制。
- 用 Sass 编译，只
@import需要的模块，例如仅导入网格系统：@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/grid"; - 关闭不需要的组件变量：
$enable-buttons: false;、$enable-modals: false; - 替换默认字体栈、移除图标字体（
$enable-gradients: false;、$enable-shadows: false;）能显著减少重绘开销 - 注意：
bootstrap-reboot.css里的<em>, </em>::before, *::after重置会影响性能，若已用现代 CSS Reset（如modern-normalize），应完全跳过它
常见坑：npm install bootstrap 后直接 link dist/css/bootstrap.min.css —— 这等于放弃所有裁剪可能。
自研原子类系统比引入框架更轻量？
是，但代价是维护成本和团队认知负荷。一个真正轻量的原子类系统，核心就三件事：确定性命名、无副作用、零运行时。
- 不要手写
.m-1 { margin: 0.25rem; }—— 应由工具生成，确保单位、缩放、断点严格对齐设计系统 - 禁止在原子类中嵌套媒体查询（如
@media (min-width: 768px) { .md\:p-4 { padding: 1rem; } }），否则会污染 CSSOM，增加解析时间 - 所有类名必须静态可分析（即不能来自 JS 拼接或模板字符串），否则构建时无法安全删除未用类
- 实测：一个仅含 spacing / typography / flex 工具的原子系统，Gzip 后可压到
2.1KB；而同功能的 Tailwind 默认配置输出仍 >40KB
最容易被忽略的一点：哪怕你只用了 3 个原子类，如果它们分散在 10 个不同 CSS 文件里，HTTP 请求合并失败，实际加载反而更慢。所以“极致性能”的终点，往往不是删代码，而是收拢、内联、预加载。
