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结构的pros/cons是什么？代码复制怎么样。第一个总是使用media-query来显示任何有用的东西。第二个需要覆盖一些第一个居中的标题特性。

我希望这不会被关闭，因为这太主观了。我只要求pros/cons，，而不是选择什么设计或者哪个更好.

Answer 1

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

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

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

不过，我要说的是，在min-width和max-width查询中同时使用@media从来都不是一个好主意。