combine media queries?

[pdehaan]

micro optimization warning! look away if this isn't how you want to waste a friday evening...

So, media queries are neat, but it seems however we solve them in Sass, it will leave oodles of @media blocks sprinkled throughout our code. I think I compiled our Sass (in master locally) and searching the non-minified output said there were 6 instances of @media.

I thought grunt-contrib-cssmin merged media queries, but apparently not. Turns out that somebody created a nice grunt-combine-media-queries module which appears to work (although reshuffling styles is always interesting). Long story longer, it merged the 6 @media blocks down to 2.

Pros: All our media queries are combined for easier debugging (not sure if there are perf benefits to combining them). Cons: Build process gets harder since grunt-sass no longer handles sourcemaps and minification.

[pdehaan]

Before (unminified):

/* ... */
@media (min--moz-device-pixel-ratio: 1.3),
    (-o-min-device-pixel-ratio: 2.6/2),
    (-webkit-min-device-pixel-ratio: 1.3),
    (min-device-pixel-ratio: 1.3),
    (min-resolution: 1.3dppx) {
  .actions .destroy a {
    background-image: url("/images/icon-delete@2x.png");
  }
}
.actions .destroy a:hover {
  background-image: url("/images/icon-delete-hover.png");
  background-size: 20px 20px;
}
@media (min--moz-device-pixel-ratio: 1.3),
    (-o-min-device-pixel-ratio: 2.6/2),
    (-webkit-min-device-pixel-ratio: 1.3),
    (min-device-pixel-ratio: 1.3),
    (min-resolution: 1.3dppx) {
  .actions .destroy a:hover {
    background-image: url("/images/icon-delete-hover@2x.png");
  }
}
.actions .destroy a:active {
  background-image: url("/images/icon-delete-active.png");
  background-size: 20px 20px;
}
@media (min--moz-device-pixel-ratio: 1.3),
    (-o-min-device-pixel-ratio: 2.6/2),
    (-webkit-min-device-pixel-ratio: 1.3),
    (min-device-pixel-ratio: 1.3),
    (min-resolution: 1.3dppx) {
  .actions .destroy a:active {
    background-image: url("/images/icon-delete-active@2x.png");
  }
}
/* ... */

After (unminified):

@media (min--moz-device-pixel-ratio: 1.3),
    (-o-min-device-pixel-ratio: 2.6/2),
    (-webkit-min-device-pixel-ratio: 1.3),
    (min-device-pixel-ratio: 1.3),
    (min-resolution: 1.3dppx) {
  #global-header #search-box input {
    background-image: url("/images/icon-search@2x.png");
  }

  .actions .destroy a {
    background-image: url("/images/icon-delete@2x.png");
  }

  .actions .destroy a:hover {
    background-image: url("/images/icon-delete-hover@2x.png");
  }

  .actions .destroy a:active {
    background-image: url("/images/icon-delete-active@2x.png");
  }
}

@media screen and (max-width: 520px) {
  #global-header h1 {
    display: none;
  }

  #global-header #user-info {
    margin-right: 10px;
  }

  #global-header #search-box {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .row .row-inner {
    padding-left: 10px;
    padding-right: 10px;
  }
}

[pdehaan]

Interesting blog post on the topic: http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries

In the words of Sam Richard in regards to Breakpoint, "… we hashed out whether there were performance implications of combining vs scattering Media Queries and came to the conclusion that the difference, while ugly, is minimal at worst, essentially non-existent at best."

Which I found linked to from this (StackOverflow) "Is there an advantage in grouping css media queries together?" post.