1

Using an external css grid-work is beneficial but the load times are intense especially with the breakpoint media queries. What are the pros and cons to loading multiple stylesheets, 1 main one with general grid-layout css, and then other stylesheets to accommodate for the media query breakpoints for that css grid layout?
If this is a good idea then this could be the next new standard for optimized css loading.

 
Multiple Media Query Stylesheets
 
Examples:

Here is an normal example grid layout stylesheet
Pros: works great and reliable, all css in one location
Cons: has a very large file size, cluttered by massive media query blocks

<link href="style.css" rel="stylesheet">

.col-md-6 {
    width: 50%;
}

@media all and (max-width: 768px) {
    .col-md-6 {
        width: 100%;
    }
}

Here is an example of multiple stylesheets based on media queries
Pros: sectionalizes code out, declutters, may reduce load times per Google's documentation Cons: not sure what they are honestly, perhaps browser support, but that's what I need help figuring out

<link href="style.css" rel="stylesheet">

.col-md-6 {
    width: 100%;
}

 

<link href="style-768.css" rel="stylesheet" media="all and (max-width: 768px)">

.col-md-6 {
    width: 100%;
}

 
 
From what i can tell here on Googles Developer docs a stylesheet that is only loaded when needed (i.e. at max-width: 768px) is only seen as 'render-blocking' if it is used. When it is not used then this whole stylesheet can possibly be skipped over and dramatically reduce the initial load of the css needed at that time.

Is this a good practice? seems like cutting out 2/3s of a css grid system by relocating media query blocks has serious benefits, but perhaps that is canceled out by the DOM needing to get more than one CSS doc?

TylerH
  • 20,799
  • 66
  • 75
  • 101
mfurr
  • 19
  • 4
  • It is quite common to include all media queries in a single stylesheet. One drawback (needs to be verified) that I can think of with separating the media queries into separates files is the browser will only use the one that matches when the page loads. If the user has their browser maximized, then minimizes it and reduces the browser window to a third of the desktops width, it won't load the media queries that would reflow everything. It's not uncommon these days for people to view sites on a desktop in a _"partial"_ mobile view. – hungerstar Dec 05 '17 at 15:22
  • You also mention _"massive media query blocks"_ which I assume you're only defining a breakpoint once and putting every possible modification in that block. While that is still common, there's been a shift to include the media query block where you need it even if it's defined multiple times. i.e. if you had two components on your page need to be modified at `768px` you would do `@media () { .a {} } @media () { .b {} }` instead of `@media () { .a {} .b{} }`. Yes, this will increase the size, but it's a huge maintainability boost. – hungerstar Dec 05 '17 at 15:39
  • Thanks hungerstar, I was thinking the same thing but it does seem that despite having the stylesheets broken up it does respond to responsive screen sizing and document viewing which is odd if Google states that it 'skips' stylesheets that don't apply - makes me think maybe it is getting that stylesheet on resize then instead of pageload? And yes bootstrap and materialize and other css grid layouts have 1 media query for a size and then all styles that need changing nested inside. I think its the better approach for the sake of saving bytes by not rewriting @media over again. – mfurr Dec 05 '17 at 23:30
  • https://stackoverflow.com/questions/8660241/single-vs-multiple-stylesheets-in-responsive-web-design?rq=1 – user2875289 Aug 20 '18 at 11:47

0 Answers0