Responsive web design is arguably the de facto standard in web design today. One of the major principles of RWD is implementing media queries into designs to make them more flexible and more adaptive to the media that renders them. There are many wonderful examples on the web that showcase the power of media queries and how they can facilitate more adaptive designs. The examples are often only a few lines of code. This is great for learning, but those examples do not scale well in a real world project. It’s not always obvious how to organize and maintain your style sheet that includes lots of media quries. Especially if you are relatively new to the field.
An issue that I feel is not discussed enough is how quickly a style sheet can spiral out of control in a real world project. Using large blocks of media queries for the design’s breakpoints will rapidly bloat your CSS and make it increasingly difficult to navigate. Especially after you’ve left the project for awhile and come back to it later.
The following is a scenario that developers often fall into when honing their responsive web design best practices. Especially when learning how to manage media query statements. I hope this article provides you with some insight and prevents you from some of the pitfalls I have fallen into previously.