One File Per Media Query

Stop redundancy. Speed up load time. Save your sanity.

One File Per Media Query

I’m tired of it. I sift through code all day and I have to deal with stupid media queries. Yes, it’s probably the greatest invention since sliced bread, but really people? Come on. We’ve adopted a new principle while simultaneously making it more difficult on ourselves. Through one LESS file I will see 23 media queries; oh, you think that’s not a lot? I’ve encountered easily 60+ in one file. It drives me absolutely nuts when I’m editing a query in the LESS file, going to Chromes developer tools only to find there’s ANOTHER media query addressing this issue in the SAME FILE. REDUNDANCY. It’s absolutely ridiculous. Trust me, I’m just as guilty of it as the next person but it begs the question; why are we sitting on our hands and accepting this? Sure you build the site once and you think you’re done with it, sure you may never see that code again; but what if? What if you do have to go in and edit that code, not just on a bi-monthly basis, or monthly basis, but on a regular basis. Why give yourself the headache when you can compile all the code in a separate CSS file?

Next time you start building a website, build it with this new principle in mind; one file for desktop, one file for your tablet breakpoints, one file for your mobile breakpoints. PUT ALL OF YOUR CODE addressing those breakpoints in the given file. This will save you time, this will save you effort, this will save load time on mobile devices, and most importantly this will save your sanity. Three media queries. I digress.