Multiple media queries organised per page?

HTML & CSS
1

This is a best practice question. Im sure it will work but im wondering if its a good idea:

Im making a responsive site and im using SASS. Im using a CMS that outputs a body class based on the page of the content type that you are viewing.

I started creating media queries and trying to put my css code for all the different content type pages within each one. For this demo code there are 2 content types, but in reality sites are more complicated.

As a result my code soon become difficult to read and I lost the ability to put a break point exactly where I wanted it, eg content-type-A might need one a 700px, but content-type-B might need one at 750px.


@media all and (min-width: 960px) {
    body.content-type-a {
     // styles here
    }
    body.content-type-b {
        // Styles here
    }
}
@media all and (min-width: 500px) and (max-width: 959px) {
    body.content-type-a {
        // styles here
    }
    body.content-type-b {
        // Styles here
    }
}
@media all and (max-width: 499px) {
    body.content-type-a {
         // styles here
    }
    body.content-type-b {
        // Styles here
    }
}

So im thinking that this is a better way to organise media queries. Ive organised the css file by content type, and then put the media queries for that content type’s page only. This means that for each page I know where to look for the code being used. It also makes it easy for me put breakpoints exactly where I want them.


// Content type A
@media all and (min-width: 960px) {
    body.content-type-a {
        // styles here
        }
}
@media all and (min-width: 500px) and (max-width: 959px) {
   body.content-type-a {
        // styles here
    }
}
@media all and (max-width: 499px) {
        body.content-type-a {
        // styles here
        }
}

// Content type B
@media all and (min-width: 960px) {
        body.content-type-b {
        // styles here
        }
}
@media all and (min-width: 650px) and (max-width: 959px) {
    body.content-type-b {
             // styles here
        }
}
@media all and (max-width: 649px) {
    body.content-type-b {
             // styles here
        }
}

This does mean that I will probably have multiple but separate media queries with the same breakpoint, is there any issue in this?

This seems to me like a really logical way to work but no tutorial or screencast ive seen does things in this way. Are there issues I havnt considered? Does anyone work in this way?

Note – Im using SASS’s nesting feature. So by putting all of my css for the page of content-type-whatever within the body.content-type-whatever {}, I know the css is only being used on that page.

Thanks a lot.

2

Hi,

We discussed media queries in a post almost next to yours so I won’t repeat myself too much.

I’ve discarded the grouped media approach and now put the media query under the element it refers to as in a fluid layout it is really an element by element approach that needs to be considered (fixed layouts are different and you would need specific breakpoints to make the changes). This seems to be much the same as you are suggestion and similar to the modular approach mentioned below.

A breakpoint can be specific to one element and you change just that element when it breaks or looks wrong. Other elements may be scaling perfectly well so you don’t need a set series of break points. Tests have been carried out and having multiple media queries scattered throughout the site may add to the code size but the effect on performance was negligible.