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

Question

Most guides recommend designing mobile first. Ie adding css-rules for mobile as default and putting tablet/desktop rules into media queries:

.class1 {
   width: 100px
}

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

the argument there is that mobile design is the simplest one and desktop would just add elements above it most of the time. It made 100% sense for me, until I tried it.
My problem is that I need to hide elements on mobile all the time. So the code ends up like this:

.class2 {
   display: none
}

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

and this is very hard to manage, since not always I need display to be block, sometimes it's flex or something else, which can be defined in a completely different class, which I mix with the class, which does the hiding. Ie I get conflicts all the time, results depends on the order I put my classes into stylesheet, and it's very easy to make a mistake. Since everyone recommends Mobile First I'm sure there is a work around this problem. Ie a way to hide the element by default (on mobile) and undo the hiding w/o making a conflict. What is this way?

If I simply use unset it unset property in all classes on the element:

 .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>

Edit: people are asking why I'm using two classes: I do it to separate responsibilities with, BEM. For example, you mix two classes, one is responsible for stuff inside your element (ie color, fonts, and whether it is flexbox or block). Another for the position of the element on your page and whether to show it. The class which desides what to do with your element as a whole should not know whether this element uses flexbox or block layout.

Answer 1

I would do something like this. Creating classes for what you need, say i want my .something hidden on phone we would hide it by default and give it a class like md-flex to become display-flex at breakpoint md ( md can be anything you like ofcourse, maybe medium-flex ).

this way you dont need to add everything into media queries, just these few classes to handle the display and maybe positions. leaving the queries in the bottom of the css files and working top side of the website == top side in css file works fine. for example

• header before
• header
• header after
• content
• sidebar
• footer before
• footer
• footer after

 .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>