Responsive CSS: Separate or Mixed In
- 2 min read
There’s been some debate since responsive web design became the norm as to whether or not you should put your responsive styles into a separate file or just mingle it with the rest of the code.
For those new to responsive design it can be hard to make a choice. I would recommend trying both on the same project, (If you’re using Git or Subversion then make a branch). That way you’ll get a feel for each without any unforseen roadblocks stopping you from fully experiencing both.
There are benefits to each, here are a few.
| Separate Stylesheet | Mixed In |
|---|---|
| When you have a separate stylesheet for responsive styles everything is all together, making it more difficult on larger projects to work on the responsive styling. | Since everything is in separate files, it’s quicker and easier, especially on larger projects, to make edits to styles without having to hunt around a big responsive.css file. Which is a bonus when you’re trying to write modular, maintainable & reusable code. |
| On smaller projects all the code being clumped together can be invaluable when you need to fine tune the UI. | You will get to a point where a lot of your code has a hundred references to the same media query. This shouldn’t happen if you design your site to be fully responsive from the ground up. But obviously varies on the size of the project and projects content. |
The responsive styles can all be added to the same media queries. For example, you might need to change the nav design and the blog post-snippet design at 700px. Instead of having two declarations of @media screen and (max-width: 700px) you would only have one. |
On the other hand, a few repeated media queries may be acceptable to you if it makes the code more modular. However this is unlikely if you’re repeating yourself. |
Specificity becomes a problem when you’re in a separate responsive file. Writing .main-wrap .header .site-logo span { } can be annoying at times when you’ve had to put something X layers deep. |
Specificity with mixed in media queries shouldn’t be a problem since you can nest the media queries wherever you need to. Just watch how deep you’re going with the nesting. |
What’s Best?
It’s really a matter of opinion at the moment as many different front-end developers have their own way of working.
Personally I’ve changed from the separate stylesheet to mixed in media queries over the last few weeks as I find it easier to manage the responsive styles. I’ve yet to use the mixed in approach on a large project but have used the separate stylesheet approach on a large project and the specificity became a little tiresome.
Even to just change a link color I had to add 3 layers of class selectors at times (I try not to go any deeper than 3 levels) which wasn’t very practical.
It’s up to you which method you choose since both have pros and cons to consider, but remember that the mixed in approach is better in theory when trying to make your code modular and maintainable.
I really want to hear your thoughts so leave a comment about your approach to this responsive problem.