css - CSS3媒体查询放在哪里？

Question

我正在与自己就将媒体查询放在样式表中的最佳位置进行哲学辩论。我正在尝试以模块化方式构建我的 CSS（如 OOCSS 或 SMACSS 等）。鉴于这种情况，我看到了两种选择：

1. 将所有媒体查询放在一个单独的样式表或主样式表的部分中。
2. 将媒体查询置于其基本对应项之下。例如，如果我有一个名为“news-item”的模块，我可以将任何必要的媒体查询样式放在该模块定义的正下方。

我倾向于后者，但这意味着我会有更多独立的媒体查询（需要响应式调整的每个 CSS 逻辑块的独立媒体查询）。

对此有什么想法吗？

Answer 1

如何使用媒体查询来加载特定于设备的样式表

喜欢：

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

或者：

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

...如果您将设备特定的调整视为主要布局的一种“子主题”（只是覆盖一些属性），这对我来说也很有意义。

Answer 2

方法 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）解决了这个问题，它允许我用变量替换所有它们并定义它们一次。

为了提高可维护性并使这些定义更加优雅，我开始在媒体查询之上使用抽象。

如果您对更多详细信息感兴趣，请阅读我的博客文章:-)

Answer 3

使用 Sass，可以更轻松地直接在对应对象下方使用媒体查询。但是，如果您的 CSS 在您的模块中得到了很好的注释，我认为将查询放在下面没有问题，因为这很容易找到。

您最终会编写更多代码来重新键入查询，但没什么大不了的。

Answer 4

也许你可以试试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/