What is the best way to write media queries?

Question

css

So, gentlemen. I decided to start optimizing the development process, and started from one of the bottlenecks - writing media queries.
It is obvious that writing them completely by hand is extremely suboptimal, so now I am doing this. I take the entire main scss file, let's say

.test{
  width: 100px;
  height: 100px;
  ...
}

and transfer it to a file, let's say 768.scss, commenting out the properties, but keeping the structure.

@media (max-width: 767px) {
   .test{
      // width: 100px;
      // height: 100px;
      ...
    }
}

Then I just uncomment the properties I need, and change them.
It's faster than writing by hand, but it still doesn't look very elegant.
What other options can you recommend? Using the capabilities of preprocessors is welcome.

Answer 1

Why move something there? Create a separate css file where you need to register media queries for different resolutions and redefine only the properties you need, and connect it.

Answer 2

Look towards this plugin for postcss: https://github.com/alexandr-solovyov/postcss-respo...