Putting media queries in their place | Boagworld - Web & Digital Advice

Web & Digital Advice

Digital and web advice from Headscape and the addled brain of Paul Boag... tell me more

Paul Boag Posted by: Paul Boag On Wednesday, 30th May, 2012

Putting media queries in their place

Development:
The estimated time to read this article is 2 minutes

Okay this is a bit of a techie, nerdy, question. It was too long to fit into a tweet so I have posted it here instead.

I have recently become a fan of object orientated CSS (or at least my limited understanding of it).

Object orientated CSS

This means that each element on a page has CSS that is unreliant on its position in the DOM. You could take that element and place it elsewhere on the page and it would appear the same.

I have also taken this slightly further and made sure that editing one element is not going to screw up another. Each element stands on its own.

It is true that this generates a little more code, but I massively prefer it as I can see all the CSS that effects a particular element in a single place. Changes are so much easier to make.

Responsive design and OO CSS

This got me thinking about responsive design and media queries. Traditionally these are kept in separate stylesheets that are triggered when a certain breakpoint is reached.

This breaks my lovely system of having code grouped together on a per element basis. I have therefore started putting media queries alongside my other styling rather than in a separate stylesheet.

My code would look something like this…

<blockquote>This is a <a href="#">quote</a></blockquote>

blockquote { width:100%; }

blockquote a { color:red }

@media only screen and (min-width: 640px) {width:50%;}

Now all my styling is in the same place. If I need to change the blockquote, I only have one place to look.

Not only that, but this involves fewer calls to the server because the media queries are all contained in a single CSS file.

My question is why does this suck? Why isn’t everybody embedding media queries alongside other CSS?

My initial thought was that perhaps a browser doesn’t load CSS files unless a breakpoint is reached. However, this doesn’t appear to be true. At least not according to some initially testing done by Craig and Dan have done (although to be fair these weren’t extensive).

So what is the problem? Let me know in the comments below.

Become a web expert with our newsletter

Receive invaluable advice every three weeks and get two free video presentations for subscribing. You can unsubscribe in one click.

Blog Updates

You can follow all my posts by subscribing to my RSS feed or signing up to my email newsletter above.

Podcast Updates

Subscribe to the podcast via itunes or RSS. You can also subscribe to my quick tips via itunes and RSS too.

Social Updates

I am completely addicted to Twitter so try following me there. I also have a Facebook page which contains considerably less waffle.

Comments

Boagworld is a community, not just the voice of one blogger. You've read the post, now its time to get involved.