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.