Most developers I know like to write write their responsive CSS in a different responsive.css file while some like put their code inside the base file; like this:
.element {
display: block;
...
@media (max-width: 768px) {
...
...
}
}
Though the first approach is more manageable, the second one looks more logical to me.
Are there any other more logical way of doing this? How do you organize your responsive CSS?
I've yet to figure out a method which will work 100% of the time for responsive CSS. There are several different reasons why.
Most of the time I put the responsive CSS at the bottom of a file. This helps preserve the cascade.
Sometimes it helps to see CSS in a relevant context. Putting the responsive CSS in the middle of the file preserves context. I rarely do this because one has to search through the entire file to see everything which happens responsively to that item.
Occasionally it makes more sense to put CSS in a template-specific or page-specific file rather than dozens of component stylesheets. There can be too much going on to easily troubleshoot CSS through dozens of files instead of from one centralized location.
Depending on your app it could be argued that one should use resolution specific stylesheets. That is to say "when your website is being viewed on this device, here are ALL of the things which happen differently". I don't do that unless the app has very few pages and needs to support a plethora of device specific conditions.
I believe the ones that do a responsive.css apart are missing one point when working with teams. In the company I work we do the approach you wrote... why? Because it's easier to know where something is there, which styles you've modified, and specifically know if you did a little hack or modification to bootstrap class but specially we do it like that 'cause we minimize git errors.
When someone is working on the index and other team member on the contact if we had a responsive.css we'll get conflicts every time we did a pull and push. And with the approach you use in the example we avoid them, why? because we will use a single file for index and another for contact, only if we used a preproccessor.
Marco Alka
Software Engineer, Technical Consultant & Mentor
I highly recommend taking a look at BEM and BEMIT, remembering common mistakes about the conventions, and coupling it with the original ITCSS architecture. Following those two (three?) guidelines will basically answer all your questions you might ever have about CSS architecture.
tl;dr: put it in separate files based on specifity, mark your responsive CSS in the class name.