Processing time of media queries

I use media queries for 4 different pixel sizes / breakpoints on my site.

For readability and grouping I am actually using a media query 23 times in the stylesheet (so duplicated throughout the file). Of course I could merge these all into the four, but ideally I don’t want to unless there’s a performance benefit (other than slightly increased file size obviously, which I don’t think is a major concern).

Is there a processing time cost to process 23 media queries rather than 4, even though overall styles are the same?

Please answer based on raw CSS rather than a pre-processor.


I can’t speak on the speed aspects, though I would suspect it requires more processing to account for all those instances of the media queries. But it sounds inefficient to me to do it this way. I would much rather have any styles for a particular media situation grouped together, and perhaps ordered in the same way as for the other devices.

I used to think like that but lately it seems to me more logical to put them alongside the original element while testing and debugging to save jumping around the page to find rules for one element. When all is finished then maybe group them together if space is tight.

It would be interesting to know if there is an extra time overhead in multiple media queries but there doesn’t seem to be that sort of information around. I’m guessing there would be a small overhead but for most normal sites I don’t think anyone would notice.