CODEWITHSUNDEEP
cssmedia-queries
mydoglixu
mydoglixu

Reputation: 944

What is the impact of having multiple CSS media queries in one stylesheet?

I have a very large and complicated stylesheet. Because of the way I've built the organization of the styles, it would make sense to me to put in some media queries for smaller resolutions throughout the stylesheet, rather than group them all into one at the end like I normally see.

For example, here's some pseudo-code for what I mean:

.navbar { width: 300; height: 20px; background: gray; }
.navbar ul { etc etc }
@media screen and (max-width: 800px) {
    .navbar ul { something to make it smaller..... }
}

.....30 some-odd lines later....

#contentblock { some styles }
@media screen and (max-width: 800px) {
   #contentblock a { something that makes this one smaller and stuff }
}

^^Hope that all makes sense.

My question is: although I am allowed to do this, does it dramatically impact the load/processing time? Is it a memory hog that should be avoided by grouping all the media queries at the bottom of the sheet, or for the sake of my own convenience, I can go ahead and do it with minimal negative impact?

Upvotes: 2

Views: 252

Answers (2)

Dryden Long
Dryden Long

Reputation: 10190

Unless you're sending your code back in time to the AOL dial-up days, this will not have any noticeable impact on performance/processing time.

That being said, don't forget your order of operations. You'll have to be careful not to overwrite your media queries. Keeping them all at the end of the stylesheet helps in preventing that and ensures that your media queries are at the end of the cascade.

Upvotes: 2

bjb568
bjb568

Reputation: 11498

Negligible.

Have you not seen the big sites and their 30k+ line stylesheets? Browsers can load it very fast, it shouldn't make a difference whether or not they are grouped together.

The real difference is on your end. Make it so that it's efficient for you to develop. Personally I think it looks better for them to be next to related styles rather than on the bottom. But be mindful that newer styles override older ones, that may be where the practice of grouping media queries on the bottom came from.

Upvotes: 2

Related Questions