设计Mobile First时如何处理`display:none`？

Question

大多数指南建议首先设计移动设备。 IE。为移动设备添加 css-rules 作为默认设置，并将平板电脑/桌面规则放入媒体查询中：

.class1 {
   width: 100px
}

@media only screen and (min-width: 800px) {
  .class1 {
     width: 200px
  }
}

那里的论点是移动设计是最简单的设计，而桌面大多数时候只会在其上方添加元素。在我尝试之前，这对我来说是 100% 有意义的。
我的问题是我需要一直在移动设备上隐藏元素。所以代码最终是这样的：

.class2 {
   display: none
}

@media only screen and (min-width: 800px) {
  .class2 {
     display: block
  }
}

这很难管理，因为我并不总是需要 display 被阻止，有时它是 flex 或其他东西，可以在完全不同的类中定义，我将它与进行隐藏的类混合。 IE。我总是遇到冲突，结果取决于我将类放入样式表的顺序，而且很容易出错。 由于每个人都推荐移动优先，我相信有办法解决这个问题。 IE。 一种默认隐藏元素的方法（在移动设备上）并在不产生冲突的情况下撤消隐藏。这是什么方法？

如果我只是简单地使用unset 它在元素的所有类中取消设置属性：

    
.flex {
  display: flex;
  background: yellow;
}

.class2 {
  display: none;
  background: red;
}

.class2 {
  display: unset;
}

<div class="class2 flex">I am not flex</div>
<div class="flex">I am flex</div>

编辑：人们问我为什么要使用两个类： 我这样做是为了与 BEM 分开责任。例如，您混合了两个类，一个负责元素内部的内容（即颜色、字体以及它是 flexbox 还是块）。另一个用于元素在页面上的位置以及是否显示它。决定如何处理整个元素的类不应该知道该元素是使用 flexbox 还是块布局。

Answer 1

我会做这样的事情。 根据您的需要创建类，比如我希望我的.something 隐藏在手机上，我们将默认隐藏它并给它一个像md-flex 这样的类，在断点md 处变成display-flex（md 可以是你的任何东西当然，也许是medium-flex)。

这样您就不需要将所有内容添加到媒体查询中，只需这几个类来处理显示和可能的位置。将查询留在css文件的底部并在网站的顶部工作== css文件的顶部工作正常。例如

• 标题之前
• 标题
• 标题后
• 内容
• 侧边栏
• 页脚之前
• 页脚
• 页脚后

.something {
  display: none;
  background: yellow;
}
/*this could be md for example*/
@media only screen and (min-width: 900px){
  .md-flex{
    display: flex;
  }
  .md-inline{
    display: inline-block;
  }
}
/*this could be lg for example*/
@media only screen and (min-width: 1280px){
  .lg-block{
    display: block;
  }
}

<div class="something md-flex">I am hidden on phone</div>
<div class="something lg-block">I am hidden on phone</div>
<div class="something md-inline">I am hidden on phone</div>