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.
