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）。这两种方法都创建了一个易于理解的示例 - 如果我要在您之后处理此文件，我会确切地知道在哪里可以找到我正在寻找的更改。

我想说一件事应该达成一致，那就是在您的@media 查询中使用 both min-width 和 max-width 绝不是一个好主意。