CSS 优先顺序

Question

所以我目前正在构建一个允许将 CSS 存储在 MariaDB (MySQL) 数据库中的系统。我目前正在为此检查逻辑流程，并想知道在媒体查询方面更可取的是什么。

所以，我真正想知道的是；

我应该在 CSS 文件顶部加载媒体查询还是在 CSS 文件顶部加载非媒体查询选择器？哪个更好？或者这是主观的，因为页面下方的代码如何覆盖这些内容。

提前谢谢大家。

Answer 1

实际上这可能是主观的，但是，有最佳实践。

我更喜欢在开发时将普通的 CSS 选择器保存在一个文件中，例如 app.scss，而将媒体查询保存在另一个文件中，例如 responsive.scss。所以即使将所有模块分开会更好。然而，最后，您需要将它们连接起来，最好的办法是先保留您的普通 CSS 选择器，然后立即加载 Media-Query。

@import 'custom/app';
@import 'custom/responsive';

遵循这种做法的原因是 CSS 将从 TOP 到 BOTTOM 读取，因此，您可能会理解所有媒体查询规则将在其原始规则之后立即隐含，并且不会影响响应能力。

总而言之，这可能是非常有问题的，可能其他开发人员更愿意紧接着编写他们的 CSS 和媒体查询 CSS 规则，但很明显，他们最有可能在主要规则之后紧接着编写媒体查询代码。为了澄清，我将只编写一个示例代码:

好

 body {
        background-color: lightblue;
    }

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

不好

   @media only screen and (orientation: landscape) {
        body {
            background-color: lightblue;
        }
    }

   body {
            background-color: lightblue;
        }

更新:

我还想提一下两种不同的方法。

移动优先

您的小屏幕样式位于常规屏幕 CSS 中，然后随着屏幕变大，您可以覆盖您需要的样式。

body { background: lightblue; }

@media (min-width: 480px) {
  body { background: lightblue; }
}

桌面优先

您的大屏幕样式位于常规屏幕 CSS 中，然后随着屏幕变小，您可以覆盖您需要的样式。

body { background: lightblue; }

@media (max-width: 480px) {
  body { background: lightblue; }
}