Media Queries, which one is the better way and why?

Question

I've been writing Media Queries, after all of my normal CSS styles (desktop and laptop devices). But, recently, looking at some examples and bootstraps CSS files, I notice media queries are directly followed after the css is written. This example will better illustrate my question,

.content {
    padding-top: 20px;
    padding-bottom: 40px; 
    font-size: 1rem;  
    }
.something{
   background: red;
   padding:20px;
   width:800px;
}
   // The Media Queries after I write all normal CSS
@media only screen and (max-width: 768px) {
    .content{
      padding:10p;
      //some style for mobile
    }
    .something{
       width:100%;
   //some style for mobile
    }
}

Or

.content {
        padding-top: 20px;
        padding-bottom: 40px; 
        font-size: 1rem;  
        }
// Media Query Directly After the CSS
@media only screen and (max-width: 768px) {
        .content{
          padding:10p;
          //some style for mobile
        }
}
.something{
       background: red;
       padding:20px;
       width:800px;
    }
       // Media Query Directly After the CSS
@media only screen and (max-width: 768px) {        
    .something{
           width:100%;
       //some style for mobile
        }
    }

So, I'm curious, which is the correct way or the better way?

I've been doing the first way, as I don't have to repeat the media queries "@media only screen and (max-width: ..px)" everytime.

Thanks

Answer 1

It really depends on you. There is no "right" way to do it. It depends on how you wish to organize your stylesheets. If you have many media query rules for different viewports, then it might make more sense to do it the way you've been doing, because you're right -- it is more efficient to have sections for different media queries. The examples that you've looked at may be doing it differently to make it more easily understood to other people reading it. I think the only important thing is to try to choose a way and stick to it as much as you reasonably can. (At the same time, rules are meant to be broken occasionally.) In the long run, this will help your code be more predictable, and it'll be easier for you to understand and maintain it.

Answer 2

Clearly one would prefer to group the media query versions of the CSS rules together with the non-media query versions, so they can be managed together. For example, if I write separate CSS for each component, I would usually want both media query versions and non-media query versions of the rules for that component to be in the file for that component. When I add and modify rules, I would prefer to do that in one place, rather than two or more.

If it bothers you that you have to write the media query again and again, which is a valid concern from the standpoint of maintaining your code when changing breakpoints, consider using a preprocessor such as postCSS which allows you to define aliases for media queries. For instance, this plugin would allow you to write

@custom-media --small-viewport (max-width: 30em);

@media (--small-viewport) {
  /* styles for small viewport */
}