When I organize my CSS, I like to keep related styles altogether (header styles are in one section, footer styles are all in the same place, etc.) (sorry, OOCSS advocates).
I’ve recently been experimenting with media queries for smaller/larger screens. To keep with my organizational scheme, I would have to include separate queries for each screen size I’m targeting with each section of the code. (So, for example, if I was supporting, like, seven different screen sizes, I would have seven different media queries with my “header” CSS, and then seven queries in the “footer” section, etc.)
Leaving aside the question of whether or not this is how I should do it, are there any technical ramifications to having so many blocks of media queries? (They’re all either min-width, max-width, or both. Say I had 100 different queries, but there are only seven distinct sizes I’m checking over and over again.) Would it take the browser longer to parse?
The code handling potentially slow paths is heavily optimized in modern browsers, so you don’t need to pre-optimize this kind of things unless you definitely have to, with the profiling data at hand. Go ahead and write it.