id、class、data- 是响应式逻辑的挂钩点：data- 表达可变状态供js驱动动态样式，class 标记响应式作用域实现语义化复用，id 保障锚点与aria关联确保可访问性。
id、class、data-* 这些全局属性本身不直接控制响应式行为，但它们是响应式逻辑落地的“挂钩点”——没它们，@media 规则只能写死样式，没法动态干预结构或状态。
用 data-* 驱动媒体查询外的响应式逻辑
媒体查询只管尺寸，但有些响应式需求取决于内容状态：比如卡片是否含长 URL、图片是否加载失败、用户是否启用了深色模式。这些无法靠 @media 捕捉，必须靠 JavaScript 读取 data- 属性来触发对应类名或样式。
-
data-has-long-url="true"可让 JS 主动给该卡片加url-truncate类，启用text-overflow: ellipsis -
data-image-status="error"配合 CSS 的[data-image-status="error"] img { display: none; }，避免挂掉的图撑破网格 - 别把值写成
data-responsive="mobile"这种冗余描述——它应该表达“可变状态”，不是“当前结果”
class 是响应式 CSS 的真正入口，不是装饰品
很多人把 class 当作样式命名空间，其实它更关键的作用是“标记响应式作用域”。比如一个组件在桌面端是三栏横向，在手机上要变成单列+折叠菜单，靠的不是全局 .card，而是局部 .card--responsive 或 .card--mobile-stack。
- 避免用
.card-mobile这类纯断点类名——它和@media强耦合，一旦断点调整就得批量改 HTML - 推荐语义化前缀：
js-accordion-trigger（供 JS 绑定）、responsive-grid-item（供 Grid 布局复用） - 多个响应式状态可共存：
class="card responsive-grid-item js-expandable"，CSS 用组合选择器精准控制
id 在响应式中不是用来选元素的，而是锚点和 ARIA 关联的刚需
响应式页面常有折叠/展开区域、移动端侧边导航、跳转式目录。这些交互依赖 id 实现原生锚点跳转或 aria-controls 关联，否则屏幕阅读器无法感知结构变化。
- 折叠面板的触发按钮必须带
aria-controls="panel-123"，对应面板要有id="panel-123" - 移动端导航按钮点击后，应通过
document.getElementById("nav-menu").classList.toggle("open")控制显隐，而不是靠 class 名硬编码 -
id值不能含空格或特殊字符，且整个页面唯一——重复id会让querySelector返回第一个，JS 逻辑直接错乱
最易被忽略的是：全局属性不参与媒体查询计算，但它们决定哪些元素“值得被响应式规则选中”。写一堆 @media (min-width: 768px) 却没给关键容器加 class 或 data-，等于把开关装在了墙上却没接线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
