响应式类名应采用“语义+断点”分离结构，如 hidden-sm、col-6-md；统一断点别名（sm/md/lg/xl）与像素值，媒体查询须与类名边界严格对齐，坚持移动优先，默认样式适配最小视口，再用 min-width 向上增强。
响应式类名设计要遵循“语义+断点”双层结构
直接用 mobile-hide、tablet-show 这类命名看似直观，但维护成本高、语义断裂。更合理的方式是把「用途」和「断点」分开：比如 hidden-sm 表示“在 small 断点及以下隐藏”，col-6-md 表示“在 medium 断点起占 6 列”。这样类名可组合、可预测，也方便后期统一调整断点值。
实际操作建议：
- 定义一套固定断点别名（如
sm/md/lg/xl），对应明确的像素值（如576px、768px、992px、1200px），所有媒体查询和类名都复用这套命名 - 避免为每个组件单独写断点逻辑，而是提取成通用工具类，例如
flex-col+flex-col-md实现“小屏竖排、中屏横排” - 慎用
!important—— 工具类一旦带!important，后续覆盖样式会变得不可控
@media 查询必须与类名断点严格对齐
常见错误是 CSS 中媒体查询用 (max-width: 767px)，而类名却叫 hidden-md，导致开发时总要心算“md 是不是包含 767px”。断点不一致会让协作和调试变慢，甚至引发偶发性显示异常。
正确做法：
- 所有媒体查询统一使用
min-width（推荐）或统一用max-width，不要混用；Bootstrap 用min-width，Tailwind 也是，保持一致性 - 类名中的断点标识必须和媒体查询的边界值完全对应，例如
hidden-md对应@media (min-width: 768px)，而不是767px或768.01px - 如果项目用 CSS-in-JS（如 styled-components），媒体查询逻辑尽量抽离成变量，避免硬编码像素值
避免在 HTML 中堆砌多套响应式类
像 class="hidden-xs hidden-sm col-12-md col-6-lg" 这种写法，表面灵活，实则难读、易错、不利于自动化检查。浏览器解析 class 列表本身无性能问题，但人眼识别和团队协作成本显著上升。
