LESS, Media Queries, and Performance

Question

I recently got started with LessCSS, and I've been having quite a bit of success in regards to how clean and readable my CSS has become. However, I don't think I'm using Less to its fullest advantage.

I'm now in the process of coding up my first fully-responsive site using Less, and I'm concerned with performance and speed. One thing to note is that I don't stick to a "breakpoint" methodology - I scale things up and down until they break, then I write CSS to fix them; which usually results in anywhere from 20 - 100 media queries.

I'd like to start using Less to nest the media queries inside my elements, such as the example below:

.class-one {
    //styles here

    @media (max-width: 768px) {
        //styles for this width
    }
}
.class-two {
    //styles here

    @media (max-width: 768px) {
        //styles for this width
    }
}

Through my initial testing, I have found that when reviewing the compiled CSS output - this methodology results in multiple (many!) instances of @media (max-width: ___px). I have scoured the internet, and haven't found anything that explicitly explains the performance implications of nesting/bubbling media queries.

Update 1: I realize that more CSS information results in a larger CSS file to download - but I'm not as worried about site load time as a sole metric. I'm more interested in the browser's handling of memory and performance after the DOM is ready.

Update 2 & Semi-Solution: I found this article which discusses the four main categories of CSS selectors and their efficiencies. I highly recommend the read which helped me sort out how best to tackle my over-media-query'd CSS.

So my question is this: after the DOM is ready, will having this many media queries in my compiled stylesheet affect load times & performance?

Lots of media queries will absolutely inflate your file size (how can it not?), which in turn impacts how long it takes to download. — cimmanon, May 09 '13 at 14:49
Thanks for the quick reply @cimmanon, the implications of filesize aren't really what I'm after here. To be more specific I'm after information regarding website performance, responsiveness, and browser resource usage after the DOM is ready. — MikeZ, May 09 '13 at 15:23
I can't answer your performance question directly, but I would tend to suggest changing to a "'breakpoint' methodology" to avoid the issue all together. There are also ways to clean the code up that way as well, [using either the question or the answer from this SO question](http://stackoverflow.com/questions/13503862/media-query-grouping-instead-of-multiple-scattered-media-queries-that-match/13617917#13617917) — ScottS, May 09 '13 at 18:22
Thanks @ScottS - but a "breakpoints" methodology will simply not work for me. The sites I work on are *very* custom, and my clients will not accept anything less than a fully customized site soup to nuts. We pride ourselves on creating sites that are differentiated from "templates" and "sites-in-a-box." — MikeZ, May 09 '13 at 18:37

score 6 · Accepted Answer · answered May 15 '13 at 01:52

Its almost impossible to give you a totally accurate answer.

When asking about performance the typical answer is to profile it and see what you get. Fix the slowest part first, then repeat.

You can profile CSS selectors in the Chrome Developer tools:

enter image description here

Ultimately I don't think the media queries will have anywhere near as much impact on performance compared to even a slightly complicated selector.

You can see more information about writing efficient CSS here:

https://developers.google.com/speed/docs/best-practices/rendering

Also with regards to file size and repeated CSS, gzip almost completely nullifies this as the gzip algorithm works best with repeated data.

Thanks @Petah. I'm still waiting for someone to release a tool that will evaluate the efficiency of a specific CSS selector live. Your answer was very helpful, especially referencing Google's best practices. — MikeZ, May 15 '13 at 13:42

score 0 · Answer 2 · answered Jul 03 '19 at 12:24

> also u can write like this :-

// breakpoints

@mobile:     ~"(max-width: 767px)";

@tablet:     ~"only screen and (min-width: 768px) and (max-width: 991px)";

@desktop:     ~"only screen and (min-width: 992px) and (max-width: 1199px)";

@desktop-xl:     ~"only screen and (min-width: 1200px) and (max-width: 1350px)";


body{
   background:black;
    @media @mobile {
       background:red;

}

}

LESS, Media Queries, and Performance

2 Answers2