CODEWITHSUNDEEP
htmlcssmedia-queriesresponsive
Kanchan Rai
Kanchan Rai

Reputation: 105

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

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

Upvotes: 4

Views: 1580

Answers (4)

user663031
user663031

Reputation:

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 */
}

Upvotes: 2

Codec
Codec

Reputation: 271

The Second option is the better way to do it.As if there occurs any change in CSS after sometime then you need to find the class for normal CSS as well as Media Queries.

In this case you just need to search for it once only.

Upvotes: 0

Rogier Spieker
Rogier Spieker

Reputation: 4187

For the examples given it mostly boils down to a personal preference, there are pros and cons for both examples.

The first example, having a single @media rule adheres to the DRY principles, which are considered best practise. The downside to this is that it may not be clear right away that some different styling may apply to those elements.

The second example, having @media rules following the initial declaration appear to make the declarations easier to follow as one immediately can see things will be different for different @media. Though it is not DRY.

I prefer the first approach, adding the @media rules to the stylesheet as late as possible and having multiple overrides in them.

My reasons for doing so are simple:

  • it's DRY by design
  • if you ever feel to need to have the media queries on <link>-elements you can more easily extract those into separate files
  • it never stops with just one @media rule, there will be more and when that happens, all readability/clarity arguments in favor of the second approach (immediate overrides) lose their value as you'll get clutter.

Upvotes: 0

Ringo
Ringo

Reputation: 5493

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.

Upvotes: 4

Related Questions