0

Im making a responsive site and im using SASS. Im using the zen theme but any theme that outputted a body class based on the content type (of the page you are on) would be in the same situation.

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?

0

First, I'll say that I'm not sure if I should even be answering this question. I don't think this is a Drupal specific question. You may get more/better answers from a forum dedicated to CSS.

Having said that:

There's no reason this shouldn't work. The CSS is valid, and if it helps you stay organized, I say go ahead.

I guess there could technically be concerns regarding the performance, but I highly doubt you'd ever be able to see/feel a difference.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.