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

Posted 2023-03-06

【中文标题】设计Mobile First时如何处理`display:none`？

【英文标题】：How to deal with `display:none` when designing Mobile First?

【发布时间】：2021-12-23 19:04:44

【问题描述】：

大多数指南建议首先设计移动设备。 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 还是块布局。

【问题讨论】：

我个人使用 JS 来处理我的很多条件渲染。在上面的示例中，由于 CSS 是从上到下读取的，因此您要处理的冲突是 display: unset; 是它知道的唯一事实。

为什么你只使用一个类来隐藏移动设备上的东西？自上而下就是 CSS 的工作方式。将此作为您的优势。

@lupz，这只是一个例子，在很多情况下，您将两个类放在一个元素上。其中一个负责站点布局和隐藏元素，另一个类负责元素内部的内容以及将其定义为 flexbox 的内容。

但是由于 CSS 是从上到下阅读的，所以在一个元素上放置两个类不是问题，而且肯定有它有其优点的情况。问题是您尝试在给定示例中处理两个类中的相同属性，并且由于 CSS 是按照它的方式读取的，后者将覆盖之前的任何其他提及。

我认为这可能会回答您的问题，我同意答案css vs bem

【参考方案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>

【讨论】：

问题是它并没有真正让你分离职责。例如，使用 BEM，您可以混合两个类，一个负责元素内部的 sutff（即颜色、字体以及它是 flexbox 还是块）。另一个用于元素在页面上的位置以及是否显示它。决定如何处理整个元素的类不应该知道该元素是使用 flexbox 还是块布局。

好吧，你可以创建一个像hide 或lg-hide 这样的类并给它display: none!important，这样在媒体规则中你放置它就会隐藏它，不管它有什么显示之前，如果媒体规则不再适用。它会回到原来的状态

如果它在媒体查询中 !important 是不必要的，因为该规则将仅通过它们的声明顺序覆盖属性的初始值。

@RamondeVries，您如何使其首先与移动设备一起使用？你默认写display: none!important，而不是在媒体规则中。