foundation xy grid 正确用法是：必须用 .grid-x 作容器，.cell 为子项，配合 .shrink（固定宽需内联样式）和 .auto（自适应宽）控制流式行为；漏 .grid-x 或误用旧版 small-6 类将导致失效。
直接用框架的工具类写原型，比手写 CSS 快得多，但前提是别把 grid-cols-4 和 flex-col 混着用，也别在没引入响应式断点配置的情况下硬套 md:hidden —— 这类错误会导致样式不生效，且调试成本远高于重写。
Foundation 的 XY Grid 工具类怎么用才不翻车
Foundation 的 xy-grid 不是靠一堆 small-6 medium-4 large-3 类堆出来的，而是用 grid-x + cell + shrink/auto 组合控制流式行为。实际开发中容易错在两点：一是漏加 grid-x 容器类，导致子元素不响应；二是误把 shrink 当成固定宽度用，结果在小屏下内容被压缩甚至溢出。
-
cell small-12 medium-6 large-4仅适用于旧版float-grid，XY Grid 下无效 - 要实现“左侧固定 200px、右侧自适应”，得写
<div class="grid-x"> <div class="cell shrink" style="width: 200px">...</div> <div class="cell auto">...</div> </div> -
align-center和align-middle作用对象不同：前者对齐容器内子项的水平位置，后者控制 flex 子项的垂直对齐（需父容器有高度）
Bootstrap 的 utility classes 在原型阶段的取舍逻辑
Bootstrap 5+ 的工具类覆盖极广，但原型阶段真正高频的是布局与显示控制，不是颜色或阴影。盲目启用全部 utility，会拖慢编译、增大 CSS 体积，还容易因优先级冲突覆盖自定义样式。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 只保留必要模块：用
@import "bootstrap/scss/utilities/_display.scss";替代整套utilities，避免引入几十个无用的text-decoration-none、shadow-sm类 -
d-none d-md-block比visually-hidden更适合原型——后者语义是“对屏幕阅读器可见但视觉隐藏”，而原型更常需要彻底移除 DOM 占位 - 慎用
position-sticky工具类：它依赖父容器有明确 height 或 overflow 设置，否则在原型里经常失效，不如直接写position: sticky; top: 0;
Tailwind 的响应式前缀和原型迭代节奏怎么匹配
Tailwind 的 sm:、md:、lg: 前缀看着方便，但原型阶段最容易卡在断点值和设计稿不一致上。比如 Figma 标注是 768px，而 Tailwind 默认 md 是 768px，但项目里改过 theme.screens 却忘了同步更新工具类前缀，结果 md:w-1/2 在预览时完全不触发。
- 检查
tailwind.config.js中screens配置是否与设计稿断点一致，尤其注意是否启用了min-width模式（默认是） - 避免嵌套多层响应式类，如
sm:flex md:hidden lg:flex—— 原型验证阶段只需 2~3 个关键断点，过度细分反而增加理解负担 -
hover:和focus-within:类在原型里很实用，但注意它们无法在移动端真机上可靠触发:hover，演示时得补一句“此效果为桌面端交互示意”
工具类不是万能胶，它省掉的是重复写 display/flex/gap 的时间，而不是替代对布局模型的理解。原型越快，越要警惕“类名堆砌”掩盖的真实结构问题——比如用十个 mt-4 代替一个 gap-y-4，后期维护时连自己都看不懂哪块 margin 是谁给的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
