media queries for components/sections

[Phreaddee]

this is a question that's been bothering me for a little while now.

when working on a "large" site (I'm using that term fairly liberally)
from a maintenance point of view it is far easier for me to create a set of rules for particular sections of the site say navigation or footer.
/* NAVIGATION */
/* generic styles */
/* media query #1 */
/* media query #2 */
/* media query #3 */

/* FOOTER */
/* generic styles */
/* media query #1 */
/* media query #2 */
/* media query #3 */
etc...

normally, when I'm done with the site, i'll combine them into the one stylesheet which has all the similar MQ together so...

/* generic styles - all*/
/* media query #1 - all */
/* media query #2 - all */
/* media query #3 - all */

but when the css gets quite long it's a lot harder to skim through and find the rule for a particular component, and there doesn't appear to be a huge performance issue with doing it via components/sections. does any one have any knowledge as to whether or not it does add to the performance of a site by doing it so?

 

[chrishirst]

but when the css gets quite long it's a lot harder to skim through and find the rule for a particular component,

I find that liberal use of Ctrl+F solves that problem.

But I've never seen any noticable differences in perfomance in using multiple style sheets vs a single monolithic style sheet vs style rules organised in 'groups' in a style sheet, and the "overhead" that annotating sections adds is minor in the overall scheme of things.

 

[ronaldroe]

You're asking whether there's a performance hit by scattering the MQs throughout?
I would think once the browser calculates the styles, which generally happens in less time than it takes for the rest of the page to load, it wouldn't matter.
You can, however test this in Chrome dev tools. Go to the Network tab and reload the page. You can see how long it takes to calculate the styles. Then, swap out the stylesheet and run it again.

 

[Phreaddee]

thanks guys, thats what I thought anyway.

I tried what you suggested ronald. the results were well...

all "site layout", "navigation", "content", "components" and "footer" with their own individual MQ's
sending 1ms
waiting 80ms
received 2ms

all in one with only the one MQ set
sending 1ms
waiting 79ms
received 1ms

so I guess it saves 2ms. according to that test.

 

[ronaldroe]

...so I guess it saves 2ms. according to that test.

Negligible. And if you're worried about file size, gzip eats repetitive text for lunch.

 

[PapaGeek]

The only problem I have with media queries is that “in my opinion” it was implemented wrong! There is no real default for an older browser that does not support it. Adding that support requires some complex coding.

Many companies like the one I work for, hold back on when they allow the latest and greatest browsers to be used on the companies workstations. Many home users are afraid to update to new things, scared they will break something with the update.

For what it is worth, find a PC with an old IE browser and test your pages on it.

Again, “in my opinion”, they should not have included the query as part of the media tag. Doing so makes the tag non-readable to non-supporting browsers. I would have used the “REL” tag to define all the stylesheets as either “stylesheet” or “alternate stylesheet”. This way you could pick and choose which styles were active on non-supporting browsers. The “QUERY” tag would then be recognized by supporting browsers and if recognized it could change the REL tag to make that style either active or inactive.

It would have the same result as they have now, but would also have a defined default for older browsers.

The problem with some of the high-brows who define these things is they believe that if you can’t see the page it is your fault for not having the latest browser. That works great in an academic world, but a business owner can’t afford to turn customers away if they are not geekish enough!

 

[ronaldroe]

We're talking about in-CSS media queries, which non supportive browsers will simply ignore. Adding support is as simple as dropping in one of a number of prewritten javascripts.