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?
