css - 在样式表中使用 mixins 还是组合样式集更好？

Question

我想知道哪种编码样式表的方式在性能、可读性和日常用例方面更好。

假设我们要制作样式:

.container {
  background-color: red;
  .nested-container {
    color: blue;
  }
}

.container-two {
  background-color: black;
  .nested-container {
    color: blue;
  }
}

我想知道对于这种情况哪种方式更有效。

/* mixins way */
@mixin duplicated-container {
  .nested-container {
      color: blue;
  }
}

.container {
  background-color: red;
  @include duplicated-container;
}
.container-two {
  background-color: black;
  @include duplicated-container;
}

/* combined sets way */
.container {
    background-color: red;
}
.container-two {
    background-color: black;
}
.container,
.container-two {
  .nested-container {
    color: blue;
  }
}

第一种方式更具可读性，至少对我而言。第二种方法使输出文件比使用 mixins 时更小，因为代码不会以任何方式重复。

请记住，这只是我想要实现的非常简单的示例，如果 container 和 container-two 位于文件中的两个不同位置，第一种方式使其非常易读且易于使用，但它会在最终输出中复制代码，因此我不确定以这种方式使用 mixins 是否好。

这几天一直困扰着我，我决定向专业人士寻求帮助，因为我总是以凌乱的样式表告终。我感谢所有帮助。

Answer 1

第一个似乎是更好的选择，因为类列在一个地方。

使用第二种方法，一旦你添加了一个.container-three，你必须记住将它也添加到.nested-container 下的类列表中> 正在从中获取其样式。

使用 mixins 时，您不必担心文件大小。大多数服务器默认使用 CSS 压缩器和 gzip 内容的现代管道，在 CSS 中复制内容不会显着增加文件大小，并且 might even perform better .

不用担心重复代码。这是一个微优化，无论如何都会被 gzip 大量优化。在这种情况下追求可读性。