移动优先设计中如何无冲突处理移动端默认隐藏元素的display属性问题

方案1：使用revert关键字重置显隐（兼容性较好） #

将控制显隐的类单独拆分，移动端默认设为display: none，桌面端断点里用display: revert恢复之前定义的display属性值，不会覆盖其他类设置的flex/grid/block等值，完全符合BEM职责拆分要求，显隐控制类不需要感知元素的布局类型。
代码示例：

/* 全局复用的移动端隐藏类 */
.hidden-mobile {
  display: none;
}

@media only screen and (min-width: 800px) {
  .hidden-mobile {
    display: revert;
  }
}

/* 元素自身的布局类，和显隐类完全独立 */
.flex-card {
  display: flex;
  padding: 16px;
  background: yellow;
}

.block-card {
  display: block;
  padding: 16px;
  background: blue;
}

HTML使用时直接组合类即可：

<!-- 移动端隐藏，桌面端自动恢复为flex布局 -->
<div class="hidden-mobile flex-card">flex布局卡片，桌面端可见</div>
<!-- 移动端隐藏，桌面端自动恢复为block布局 -->
<div class="hidden-mobile block-card">block布局卡片，桌面端可见</div>

该方案兼容Chrome >= 84、Firefox >= 87、Safari >= 14.1，覆盖绝大多数用户场景。

方案2：使用级联层（Cascade Layers）彻底解决优先级冲突 #

如果需要处理更复杂的样式叠加场景，可以将样式按职责拆分到不同级联层，从根源上避免类书写顺序导致的样式冲突：

/* 定义层级优先级：布局层 < 显隐控制层 */
@layer base-layout, responsive-visibility;

@layer base-layout {
  .flex-card {
    display: flex;
    padding: 16px;
    background: yellow;
  }
}

@layer responsive-visibility {
  .hidden-mobile {
    display: none;
  }

  @media only screen and (min-width: 800px) {
    .hidden-mobile {
      display: revert-layer;
    }
  }
}

revert-layer会直接恢复到上一个级联层中定义的display属性值，完全隔离不同职责的样式，不会出现优先级混乱问题。

方案3：非display属性控制显隐（兼容性最优） #

如果需要兼容非常老旧的浏览器，可以换用不影响布局属性的显隐控制方案，完全不会和display属性产生冲突：

.hidden-mobile {
  /* 视觉隐藏 */
  opacity: 0;
  visibility: hidden;
  /* 不占页面空间，和display:none效果一致 */
  height: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
}

@media only screen and (min-width: 800px) {
  .hidden-mobile {
    opacity: 1;
    visibility: visible;
    height: auto;
    width: auto;
    overflow: initial;
    pointer-events: auto;
  }
}

内容的提问来源于stack exchange，提问作者klm123