tailwind css 因原子化样式、灵活响应式及体积可控成为 bootstrap 替代首选；materialize 适合快速上线且接受其设计规范，bulma 更自由但需自实现交互；foundation 和 semantic ui 已式微；pure.css 与 html5 boilerplate 是轻量起点模板，非完整框架替代品。
Tailwind CSS 为什么现在被大量项目选作 Bootstrap 替代品
它不是“组件库”，而是把 margin、flex、text-sm、bg-blue-500 这类原子级样式直接暴露为 class，不预设 UI 结构。这意味着你写 div 时就决定视觉，而不是先套 class="btn btn-primary" 再回头改样式。
常见错误现象：刚上手的人会下意识复制 Bootstrap 的 HTML 结构（比如一堆 container/row/col），结果发现 Tailwind 没这些——它用 max-w-4xl + mx-auto + grid grid-cols-1 md:grid-cols-3 实现同等效果，但更灵活。
- 响应式断点是内建的：
md:text-lg、lg:hidden直接生效，不用额外写媒体查询 - 需要配
tailwind.config.js才能定制颜色/间距/字体，否则默认配置对中文项目不够友好（比如缺少text-xs以下字号） - 构建后体积可控：启用
content扫描路径后，未使用的 class 不会打进 CSS 文件
Materialize 和 Bulma 在移动端项目里怎么选
两者都基于现代 CSS（Flexbox/Grid），但设计哲学不同：Materialize 强绑定 Google 的 Material Design 规范，Bulma 更像“CSS for humans”——纯 CSS、无 JS 组件、靠 class 组合驱动交互逻辑。
使用场景差异明显：
- 如果你的项目要快速上线、且接受阴影/波纹/卡片动效等固定交互模式，
Materialize的modal、dropdown、tabs开箱即用，但得接受它的 JS 依赖和全局样式污染风险 -
Bulma的navbar-burger需要自己写 JS 控制展开收起，modal也只提供结构 class（modal/modal-content），动画和触发逻辑全由你掌控 - Bulma 默认不带图标，得额外引入
@fortawesome/fontawesome-free或mdi；Materialize 自带图标字体，但加载慢、字体文件大
Foundation 和 Semantic UI 还值得在新项目里用吗
Foundation（v6.7+）仍在维护，但社区活跃度已明显低于 Tailwind/Bulma；Semantic UI 已于 2022 年停止主版本更新，当前最新稳定版是 v2.4.2，文档站仍可访问但不再修复兼容性问题。
容易踩的坑：
- Foundation 的栅格系统仍重度依赖
float回退方案，xy-grid虽支持 Grid，但文档分散、示例少，新手容易误用旧模式 - Semantic UI 的 class 命名高度语义化（如
ui huge primary button），初看直观，但组合爆炸严重，调试时很难定位哪个修饰词生效了 - 两者都打包了大量未使用的 JS 组件（比如
accordion、calendar），Webpack/Rollup 很难做有效 tree-shaking
Pure.css 和 HTML5 Boilerplate 属于什么定位
它们不是“框架替代品”，而是“起点模板”：Pure.css 提供极简的表单/表格/按钮/栅格 class，没 JS、不带主题、不处理响应式断点细节；HTML5 Boilerplate 是一整套工程化脚手架，含 .htaccess 配置、normalize.css、性能优化注释、甚至 IE 条件注释占位符。
适合这些情况：
- 你要从零开始搭一个后台管理页，不需要复杂 UI，只要干净栅格和基础表单样式 → 用
Pure.css - 你要部署静态官网，关心首屏渲染、缓存策略、跨浏览器兼容底线 → 直接拿
html5-boilerplate的index.html和css/main.css起手 - 别指望它们提供
toast或date-picker，这类交互必须自己实现或引入第三方库
真正容易被忽略的是：这些轻量方案在团队协作中反而更难统一规范——没有强制约定的 class 命名和结构，时间一长，my-btn、btn-custom、primary-button 就会同时出现在一个项目里。
