Using the same values with different classes in different @media without duplicating

Question

I have CSS like that:

.class1 {
  display: block;
  color: red;
}

.class2 {
  display: block;
  color: blue
}

@media(max-width:800px) {
  .class1-mobile {
    display: block;
    color: red;
  }
  .class2-mobile {
    display: block;
    color: blue
  }
}

@media(min-width:800px) {
  .class1-desktop {
    display: block;
    color: red;
  }
  .class2-desktop {
    display: block;
    color: blue
  }
}

All the properties and their values are the same and the only difference is in class names and media queries. So I'd like to know if there is a way not to duplicate them.

Answer 1

here is a simplified way of doing your media queries using non-mobile first approach (max-width)

.class {
  display: block;
  /* optional because div is already block element*/
}

.class1 {
  color: blue
}

.class2 {
  color: red
}

@media(max-width:800px) {
  .class1 {
    color: red;
  }
  .class2 {
    color: blue
  }
}

<div class="class class1">red</div>
<div class="class class2">blue</div>