Bulma更易上手，Foundation更易“控场”：Bulma靠自然语言类名（如is-primary、has-text-centered）和零JS依赖实现直觉开发；Foundation通过显式断点（small-6 medium-4）、双栅格模式及200+可配变量提供精细控制，但需理解其抽象契约与全量导入机制。
直接说结论：Bulma 更易上手，Foundation 更易“控场”——前者靠约定和类名直觉，后者靠配置和抽象层级。
为什么 Bulma 的 class 名更容易猜中？
Bulma 的命名几乎就是自然语言翻译：is-primary 表示主色按钮，has-text-centered 就是居中文本，is-fullheight 意味着占满视口高度。它不抽象、不封装语义，所有样式类都暴露在 HTML 层。
- 不需要查文档就能试出
is-4（占 4/12 栅格）或is-multiline（允许多行排列） - 没有“组件初始化”概念，写完 HTML 就渲染，不依赖 JS
- 但代价是：复杂交互（如下拉菜单、模态框）得自己写 JS 或引入第三方库
- 如果你改了
$body-background-color变量，所有基于它的衍生色（比如is-light的背景）会自动同步更新——这是 Sass 编译时决定的，不是运行时计算
为什么 Foundation 的响应式栅格更“可预测”？
Foundation 的 grid-x + cell 模型强制你声明断点前缀，比如 small-6 medium-4 large-3，而不是靠全局媒体查询隐式切换。这种显式写法让多人协作时不容易误判布局行为。
- Foundation 默认启用
meta.foundation-mq-small等自定义媒体查询变量，你可以统一调整所有断点阈值，而 Bulma 的$tablet、$desktop是硬编码数值（如 769px），改起来要动源码 - Foundation 提供
xy-grid（Flex）和float-grid（传统浮动）双模式，Bulma 只有 Flex - Foundation 的
data-responsive-toggle属性配合 JS 初始化后，navbar才能折叠；Bulma 的navbar-burger必须手动加is-active类——前者封装了状态管理，后者把控制权完全交给你
npm 引入后，谁的定制成本更低？
两者都支持 Sass，但路径不同：
- Bulma：导入
bulma/sass/utilities/_all.sass后，直接覆盖变量（如$primary: #3498db），再 importbulma/bulma.sass即可。没多余钩子，改完就生效 - Foundation：必须用
@import '~foundation-sites/scss/foundation';并调用@include foundation-everything;，否则很多组件样式不会加载；想关掉某个模块（如tooltip），得单独@include foundation-tooltip;——它默认“全量”，Bulma 默认“按需” - Foundation 的
_settings.scss文件里有 200+ 可配变量，Bulma 的_functions.sass和_variables.sass加起来不到 100 个——选项多不等于更易用，而是更易“配错”
真正容易被忽略的是：Bulma 的轻量建立在“不帮你做判断”上，Foundation 的稳健来自“处处留钩子”。选哪个，取决于你团队是否愿意为明确的契约付出前期理解成本，还是宁愿用直觉换后期维护风险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
