我正在与我自己进行一场哲学辩论，讨论在样式表中放置媒体查询的最佳位置。我试图模块化构建CSS（如OOCSS或SMACSS等）。鉴于上下文，我看到两种选择：在哪里放CSS3媒体查询？
我倾向于后者，但这意味着我会有更多单独的媒体查询（每个逻辑块的CSS需要响应性调整）。
对此有何看法？
如何使用媒体查询只加载设备特定样式
，如：
@import url(mydevice.css) this and (that);
或：
<link rel="stylesheet" media="only this and (that)" href="mydevice.css" />
...如果你正在寻找的器件固有的调整作为主布局的一种“子主题”（只是覆盖一些属性），这对我也是有意义的。
通过Sass，可以更轻松地使用直接位于对应方下面的媒体查询。但是，如果你的CSS在你的模块中有很好的评论，我不觉得有什么问题可以放在下面的查询中，因为这很容易找到。
你最终会写更多的代码重新输入查询，但不是什么大不了的事。
方法＃2对我更好。
当我是新手时，我正在使用方法＃1 - 我一起写了我的媒体查询（在我的样式表的底部或另一个文件中）。
.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 { ... }
}
这种方法有一些缺点。根据我的经验，最值得一提的是的可维护性很难。主要原因：.news-item逻辑分布在多个不相关的CSS行中。
后来自然，我决定把相关的风格放在一起。 方法2：
/** Header's styles and media queries */
.header {
...
}
@media screen and (max-width: 1024px) {
.header { ... }
}
@media screen and (max-width: 720px) {
.header { ... }
}
/** News-item's 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 */
然而，在这种方法中，重复的媒体查询max-width值全能看起来不足够的维护。我通过使用CSS预处理器（如SASS）解决了这个问题，它允许我用变量替换所有变量并定义它们一次。
为了提高可维护性并使这些定义更加优雅，我开始在媒体查询之上使用抽象。
如果您有兴趣了解更多信息，请read on my blog post :-)
可能是你可以尝试css variables，这是原生支持重用你的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/
我敢肯定，我读的地方，这种方法比其在样式表的媒体查询慢了许多。 – SpaceBeers