CSS代码结构决定

Question

我正在为一些网站制作标题。此标题包含两种不同的设计：

浮动/水平标题：

+-------------------------------------------------------------------------+
|      +--------------+                       +--------------------+      |
|      |     LOGO     |                       | Menu | Menu | Menu |      |
|      +--------------+                       +--------------------+      |
+-------------------------------------------------------------------------+

中心标题：

+-------------------------------------------------------------------------+
|                          +--------------------+                         |
|                          |        LOGO        |                         | 
|                          | Menu | Menu | Menu |                         |            
|                          +--------------------+                         |
+-------------------------------------------------------------------------+

当浏览器宽度小于某个断点值时，应使用居中标题。否则水平标题。这可以通过CSS media-queries来实现。我的问题是 header.css 文件的代码组织更好：

1. 仅使用两个设计（font-family，container-width: 100%等）的代码交集以及两个媒体查询。

伪码：

/* Code necessary for both designs */

@media-query (width < breakpoint) {
  /* upgrade code to centered header */
}

@media-query (width >= breakpoint) {
 /* upgrade code to floating header */
}

1. 始终使用居中标题+ media-query来覆盖必要的部分：

伪码：

/* Code necessary for centered designs */

@media-query (width >= breakpoint) {
 /* Overwrite centered header code */
 /* Insert floating header code */
}

我的问题是这两个css结构的专业 / 缺点是什么？代码重复怎么样？第一个总是使用media-query来显示任何有用的内容。第二个需要覆盖一些第一个居中的标题功能。

我希望这不会被关闭，因为它太主观了。我只要求专业 / 缺点，不选择哪种设计或哪种设计更好 ..

Answer 1

我绝对不会建议您的第一个例子，基于可读性和一般的CSS原则。同时使用greater than和less than的想法是多余的，有点令人困惑 - 它相当于为一个条件做两个if语句。

以降序或升序排列媒体查询，将默认样式保留为最大或最小的屏幕。

就个人而言，我定义了任何媒体查询之外的所有全宽样式，然后在我遍历样式表时使用max-width，定义越来越小的屏幕尺寸。话虽如此，相反的情况也是完全可以接受和通用的，您可以在任何媒体查询之外定义移动尺寸，并向下移动增加（使用min-width）。这两种方法都创建了一个易于理解的示例 - 如果我在您之后处理此文件，我会确切地知道在哪里找到我正在寻找的更改。

我说一件应该商定的事情就是在你的min-width查询中使用 max-width和@media从来都不是好主意。