Media Queries and Stylesheets

HTML & CSS
1

Do you have a different CSS file for each breakpoint in your media queries?

Is there a way to do things all in one stylesheet?

2

What makes you think you need a separate file for each breakpoint? I usually just group things up like this

#thing {
  /*style*/
}
@media screen and (max-width:xxx) {
  #thing {
    /*media query style*/
  }
}
/*next element*/

That could be main.css or whatever. No need for separate files at all.

Some people prefer to put all the media queries at the end of the file lumped together. I do it the above way just to keep everything in the same spot. I don’t care about the extra few kbs it produces.

1 Like
3

Because you can do it like this…

<link rel="stylesheet" media="all and (min-width: 480px)" href="styles-480.css">
1 Like
4

But why do that and serve up 5 or so files (HTTP requests) (or however many media queries you end up making) when everything will fit into one file? That makes maintaining more difficult and that’s a no-no.

That logic will mean that when you need to make a brand new media query for (example) a certain page-specific situation, you will need a brand new file. Especially your skill level with RWD will mean you will not be making optimal code and as a result, probably more breakpoints than needed.

1 Like
5

Just because you CAN doesn’t mean it’s a good idea. Logic would dictate that it’s not that smart to do that. Think about what advantages that has.

6

I just saw an example online where someone did that. Wasn’t sure, so I asked.

Thanks for pointing out my skill level, Ryan!

7

I saw a Google Developer do it, so there must be some merit to that approach.

It would keep your styles more compartimentalized.

Also, it would eliminate the verbose wrapper you have to put around all of your styles.

8

I apologize if you feel insulted, but I’m trying to put everything in perspective to you. Trying to get you to think logically about some of these questions you put forth, since many are answerable with just some critical thinking and some searching. Critical thinking is a good skill :thumbsup: .

There is no context with that example though. Perhaps in that developers situation/page, it makes sense. 99% of the time though, it’s best to serve in as little HTTP requests as possible.

Too compartmentalized. Switching between multiple files, different breakpoints per file. Seems like madness.

9

It also means you will get “render blocking” messages

10

What’s that?

11

What you asked about a few weeks ago.

i.e. the messages Google was giving you when you tested the site for “friendliness”

3 Likes
12

[quote=“mikey_w, post:7, topic:196218”]
I saw a Google Developer do it, so there must be some merit to that approach.
[/quote]One point to bear in mind with “I saw it online” is: how recent is the resource you’re looking at? As I’ve already mentioned, things are moving pretty fast in this area, and you really need to make sure you’re looking at the most up-to-date information. (There was probably a time when Google developers used HTML tables for layout, but that doesn’t mean it’s still a good approach to take. )

13

Bear made a pun! :smile:

So how old is too old? 2 years? 1 year? 6 months?

I learned the hard way on that one from @TechnoBear! :wink:

14

It depends on the advancements in that area. An article about “clearfix” might be OK to have been made in the past 3 years, since not much has changed.

An article on the latest and greatest layout technique (flexbox) might want as up to date as possible (months) because syntax can change; new features, browser support, etc.

It really just depends subject to subject. I think if you Google you can sort by date or something. Just read a lot and if you find conflicting information, either search about what happened in that specific area, or just post here and we can clarify.

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.