响应式类名应采用“语义+断点”分离结构，如 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 列表本身无性能问题，但人眼识别和团队协作成本显著上升。
更可持续的做法：
- 优先用单一语义类（如
card-layout）封装整组响应行为，把媒体查询逻辑收进 CSS 内部 - 若必须用工具类，控制在 2–3 个以内，并按断点从左到右排序（如
text-center text-left-md text-right-lg），形成阅读习惯 - 借助 PostCSS 插件（如
postcss-class-variance）或构建时校验，自动提示冗余或冲突类名
移动端优先时，基础样式不写媒体查询
很多人一写响应式就立刻套 @media，结果默认样式反而成了“桌面端专属”，移动端需要额外覆盖，违背移动优先原则。真正合理的起点是：默认样式适配最小视口，再用 min-width 向上增强。
这意味着：
-
font-size: 14px、padding: 8px、flex-direction: column这类基础值直接写在常规选择器里，不包裹媒体查询 - 只有当需要“更大屏幕才启用”的特性（如栅格列宽、侧边栏显示、字体放大）才加
@media (min-width: 768px) - 如果用了 CSS 自定义属性（
--spacing-sm等），可在 :root 中设默认值，再在媒体查询中重置，比重复写声明更干净
断点数值本身不是重点，重点是整套类名体系与媒体查询逻辑是否咬合严密；很多问题其实不出在技术实现，而出在团队对“md 到底指什么”没有共识。
