merge media queries

[ronaldruzicka]

Should we add a media query merge tool to group together styles that are under the same media query? e.g:

.foo {
  width: 240px;
}

@media screen and (min-width: 768px) {
  .foo {
    width: 576px;
  }
}

.bar {
  width: 160px;
}

@media screen and (min-width: 768px) {
  .bar {
    width: 384px;
  }
}

would result to:

.foo {
  width: 240px;
}

.bar {
  width: 160px;
}

@media screen and (min-width: 768px) {
  .foo {
    width: 576px;
  }
  .bar {
    width: 384px;
  }
}

I know about the mqpacker

[janpanschab]

Would be nice to have results from some real projects. Please, test it on 2 or 3 current projects. Test the size and also problem with specificity (order).

[kettanaito]

How do you think it would work if we do something like:

.foo {
    position: relative;
    margin-top: 10px;

    @media screen and (max-width: 500px) {
        margin-top: 5px;
    }
}

Do we forbid this kind of usage as a part of CSS quality assurance? For me it makes sense in cases certain media query should add up some properties.

[ronaldruzicka]

@kettanaito I don't really see the issue with that media query. Regarding this plugin, it just takes duplicate media queries and merge them to single one, so this would just create another media query group, and if more selectors would have it, they would be merged together under one media query. But as I tested now, if you are using a default bootstrap 4 mixin you end up with @media (min-width: 768px), if you write another one like @media screen and (min-width: 768px) with screen it would create a new media query. So maybe we should agree on which one to use.

But as Honza said, maybe there could be some specificity issues. I'm gonna test it on Walmark, but I think we also had it on metro core project and we didn't have any problems.

[vbulant]

I don’t think we need that from the performance perspective, see https://helloanselm.com/2014/web-performance-one-or-thousand-media-queries/

Regarding the filesize, we should try it on a large project (maybe zindulka) and compare gzipped results. I belive gzip will almost strip the difference but let’s see…

[janpanschab]

Exactly, do not forgot to gzip.

[ronaldruzicka]

I'm closing this issue as I see it's not valid so much