CODEWITHSUNDEEP
csslessmedia-queries
Matt
Matt

Reputation: 2327

Where to put CSS3 Media Queries for a scalable web app?

Currently I have created a file called .media-queries.css to house all of my media queries and the variety of breakpoints on my site (5 breakpoints); however, this is proving to be a pain in the rear end. I am having to duplicate my website structure in these media queries for the sake of CSS specificy. This approach doesn't seem to be scalable. Am I better of baking in the media query right into the actual CSS of where that particular selector lives?

What are some alternative methods and design patterns?

Upvotes: 0

Views: 184

Answers (2)

Kaloyan Kosev
Kaloyan Kosev

Reputation: 13067

Based on my experience, keeping the related styles together works best.

Here's a practical example:

/** Header's styles and media queries */
.header {
  ...
}
@media screen and (max-width: 1024px) {
  .header { ... }
}
@media screen and (max-width: 720px) {
  .header { ... }
}

/** Nav's styles and media queries */
.nav {
  ...
}
@media screen and (max-width: 1024px) {
  .nav { ... }
}
@media screen and (max-width: 720px) {
  .nav { ... }
}

/** ... and so on */

Here's another similar StackOverflow thread that might give you some more insights.

If you're interested in more details, you can also read on my blog post where I'm sharing my experience, the things I’ve struggled with and some ideas I know :-)

Upvotes: 0

David Taiaroa
David Taiaroa

Reputation: 25485

You could follow the lead of the great minds behind the likes of Bootstrap and Foundation and combine everything into the same file. Maintenance would be easier, and you would have some slight improvement in site performance. Completely off-topic, but I've found that using http://lesscss.org has really helped keep CSS organised.

Good luck!

Upvotes: 1

Related Questions