CODEWITHSUNDEEP
cssperformancemedia-queriesoocss
All Bits Equal
All Bits Equal

Reputation: 793

Do media queries cause a rendering performance hit?

While refactoring my main css into a modular approach I'm using @media all {} to wrap css modules in the IDE. This approach makes it much more easy to scan the files' content as we can't use a preprocessor like less or sass right now.

My only concern is that all those media queries (one for each css module / set of coherent selectors) might cause a performance hit while rendering the site. I am NOT concerned about the file size of our css files as this is a minor issue with a slim modular css framework and proper zipping.

Do media queries like @media all {} have an impact on the performance (both on desktop and mobile/other) devices if used to frequently?

Upvotes: 3

Views: 1746

Answers (1)

Benjamin Gandhi-Shepard
Benjamin Gandhi-Shepard

Reputation: 161

The answer is no... and yes. Having a bunch of media queries will not make the site harder to render. But more lines of code makes a file larger and that technically takes longer to load. Still this isn't much of a performance hit.

But when resizing the browser, it will be taxing on the browser to recalculate a bunch of different mq settings. Read more here: Web Performance: One or thousands of Media Queries?

But...if you want to be proactive about this, with out a preprocessor, just use Pleeease. Pleeease gives you preprocessor like ability with vanilla css. AND it provides a PostProcessor function called mqpacker. It will find all similar media queries in your style sheet and merge them into related media queries. But again, if you are gzipping your stylesheet on the server, you don't need to worry about it.

Good luck! Stay awesome!

Upvotes: 3

Related Questions