CSS优先顺序

Question

因此，我目前正在构建一个允许将CSS存储在MariaDB (MySQL)数据库中的系统。我目前正在研究这方面的逻辑流程，并想知道在媒体查询方面有什么更好。

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

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

提前谢谢各位。

Answer 1

实际上，这可能是主观的，但是，这是最好的做法。

我喜欢的是将普通的CSS选择器保存在一个文件中，比如app.scss，在开发时将媒体查询保留在另一个文件中，比如responsive.scss。因此，甚至更好的做法是将所有模块分开。但是，最后，您需要将它们连接起来，最好的方法是先保持正常的CSS选择器，然后再加载媒体查询。

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

遵循这一做法的原因是CSS将自上而下读取，因此，您可能会理解，所有媒体查询规则都将在其原始规则之后被隐含，并且不会影响响应性。

总之，这可能是一个非常重要的主题，其他开发人员可能更喜欢在后面编写CSS和媒体查询CSS规则，但这很明显，他们最有可能在主要规则之后编写媒体查询代码。为了澄清，我将只编写一个从我的角度来看的示例代码：

好

 body {
        background-color: lightblue;
    }

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

BAD

   @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; }
}

Answer 2

无所谓。出于实际目的，我将媒体查询放在建模元素之后，但是您可以将所有查询放在页面的顶部或底部，这样就会变得无关紧要(它不会加载得更快或更慢)。为了调试目的，我认为我的方法更好。

例如：

.box { max-width: auto; }

@media (min-width: 1200px) {
  .box {
    max-width: 10px;
  }
}