推荐标识应采用相对定位容器内绝对定位元素实现，确保位置稳定、语义明确、无障碍可用且不干扰grid自动对齐逻辑。
高亮推荐项不是加个边框或背景色就完事，关键在于它必须在列数变化时保持位置稳定、语义明确、无障碍可用，且不破坏 Grid 的自动对齐逻辑。
推荐标识该用绝对定位还是 grid-area？
用 position: relative 容器 + 绝对定位 span 是更可控的选择。它不参与 Grid 轨道计算，不会干扰 auto-fit 列数判断，也不会因 grid-template-areas 在断点中重写而失效。
- 绝对定位的
top: -12px和right: -12px是经过多端测试的安全值，适配圆角卡片与常见 padding - 若用
grid-area，需在每个断点里同步更新grid-template-areas，比如小屏从"header badge price features cta"改为"header" "badge" "price" "features" "cta"，极易漏写或错位 - 绝对定位元素必须加
aria-label="当前为推荐方案"，否则屏幕阅读器无法感知其语义优先级
data-recommended 属性怎么配合 CSS 变量驱动样式？
把状态逻辑交给 HTML 属性，样式由 CSS 变量承接，比写一堆 .card.recommended 类更易维护，也方便后续用 JS 切换。
- HTML 中写
<div class="pricing-card" data-recommended>，不要用布尔值 <code>data-recommended="true"——属性存在即为真，更简洁 - CSS 中用属性选择器：
[data-recommended] { --highlight-bg: #ff6b35; --highlight-color: white; } - 高亮标签内文字用
content: "推荐";+color: var(--highlight-color); background: var(--highlight-bg);，便于品牌色全局替换 - 避免在
@media里重复定义变量，统一在 :root 或组件根作用域声明 - 必须满足 WCAG AA 级对比度：背景色
#ff6b35与白色文字对比度为 4.7:1，达标；若换深色主题，需同步更新--highlight-color - 图标（如 ★）应作为增强而非唯一标识，用
aria-hidden="true"避免重复播报 - 可加轻微动效提升识别率，例如
transform: scale(1.05); transition: transform 0.2s ease;，但禁用闪烁或持续动画 - 别用
border-left: 4px solid #ff6b35这类“强调”，它在单列模式下会顶出容器，且无法响应式缩放
为什么不能只靠颜色或图标区分「推荐」？
颜色对比度不足或仅靠 ★ 图标，在弱视、色觉障碍用户场景下会直接丢失信息，这不是视觉降级，而是可访问性失效。
真正难的不是让「推荐」看起来醒目，而是让它在 minmax(280px, 1fr) 自适应列宽、auto-fit 合并轨道、卡片内容长度不一的情况下，始终锚定在视觉焦点区——这需要放弃“靠 Grid 轨道定位”的惯性思维，转而用定位 + 语义 + 可访问性三者锁死。
