Placing regular CSS next to Media Queries?

Whenever I see people doing responsive design - which I am just starting to learn - I always see them place the @ media at the end of the stylesheet.

On one hand, I can see why you would want to group all of the styles for a certain sized screen (e.g. max-width: 30em) together.

On the other hand, if you have lots of styles, then when you are comparing “regular” styles against your “media query” styles, it becomes unmanageable in my mind. When I have to scroll a long ways, by the time I get to where I am going, I have forgotten the original style I was looking at!! :wonky:

So I was thinking that it might make more sense to group things together like this…

#menuButton{
    display: none;
    padding: 0.5em 0;
    background-color: #555;
    color: #fff;
 }

#menuButton::before{
    content: 'Show ';
 }


@media (max-width: 30em){
	#menuButton{
		display:block;
		text-align:center;
}

Yes, it would technically make your stylesheet long than the normal way people code things - because you’d be repeating the @ media line, but then it would also be much easier to have all of your same elements together (e.g. # menuButton)

What do you think?

I don’t have a strong opinion in either direction, but I do put all my media queries at the bottom of the CSS file. I’ve just found it easier to track “this is everything I have to change for this particular media type”.

Keep in mind, your browser’s console will show you the CSS largely in the order you’re suggesting, regardless of what the source CSS file looks like. So if you put the MQ’s at the bottom in the file, and then in your browser you view the #menuButton, you will see those three entries you list above. So using the console as part of your editing and debugging process gives you both flavors of the sort.

@tracknut,

What do you mean by “console”?

I mostly use Firefox and I know the basics of the developer tool where you can click on elements and see the CSS related to it.

Is that what you mean?

Or are you talking about something else?

Yep that’s what I meant!

I’ll have to look into that more.

Thanks.