Where to place CSS3 media queries?

Question

I have a philosophical debate with myself in a better place to put media queries in style sheets. I am trying to structure my CSS modularly (e.g. OOCSS or SMACSS, etc.). Given this context, I see two options:

• Put all media queries together in a separate style sheet or section of the main style sheet.
• Place media queries under their basic counterparts. For example, if I have a module called "news item", I can put any necessary types of media queries right below the definition of that module.

I tend to the latter, but that would mean that I would have many more separate media queries (separate for each CSS logical block, requiring flexible configuration).

Any thoughts on this?

Answer 1

Approach # 2 works better for me.

When I was a beginner, I used Approach No. 1 . I wrote my media queries together (at the bottom of my stylesheet or in another file).

.header { ... } .news-item { ... } .footer { ... } /** * ... * * bla bla, imagine a huge amount of styles here * * ... */ /** All style tweaks for screens < 1024px */ @media screen and (max-width: 1024px) { .header { ... } .news-item { ... } } 

This approach has several disadvantages. Based on my experience, the most remarkable is that maintainability is tough . Main reason: .news-item logic extends to several unrelated CSS lines.

Later, naturally, I decided to keep the related styles together. Approach # 2 :

 /** Header styles and media queries */ .header { ... } @media screen and (max-width: 1024px) { .header { ... } } @media screen and (max-width: 720px) { .header { ... } } /** News-item styles and media queries */ .news-item { ... } @media screen and (max-width: 1024px) { .news-item { ... } } @media screen and (max-width: 720px) { .news-item { ... } } /** ... and so on */ 

However, in this approach, repeated requests for media max-width all-around values ​​do not look acceptable. I solved this problem using a CSS preprocessor (like SASS), which allows me to replace all of them with variables and define them once.

To improve serviceability and make these definitions more elegant, I started using abstraction on top of media queries.

If you are interested in more detailed information, read in your blog post :-)

Answer 2

How about using media queries only to load device-specific style sheets.

as:

 @import url(mydevice.css) this and (that); 

or

 <link rel="stylesheet" media="only this and (that)" href="mydevice.css" /> 

... if you look at certain device settings as a kind of "subtopic" on the main layout (just rewriting some properties), this also makes sense to me.

Answer 3

With Sass, it’s easier to use media queries directly under peers. But if your CSS is well commented on in your modules, I don't see a problem to put the queries below, as that would be easy to find.

In the end, you write a little more code, renaming the queries, but not by much.

Answer 4

Maybe you can try css variables , which is built-in support for reusing your css!

 :root { --main-color: #F06D06; } .main-header { color: var(--main-color); } .main-footer { background-color: var(--main-color); } 

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care

https://css-tricks.com/difference-between-types-of-css-variables/