SASS占位符以避免CSS输出中的重复规则

Question

我有个问题要问这里所有的前卫。首先，这不是占位符和混音的问题，因为我已经有了一个概念，是使用一种还是另一种。

因此，问题是--您是否使用只有一个或两个规则的SASS占位符来避免结果CSS输出中的多次出现？

例如，考虑一个页面，在该页面中，需要向左浮动许多、许多、多个不同的元素。创建一个只有"float: left“的占位符，并根据需要对其进行扩展，会是个好主意吗？这将导致CSS输出中多个选择器的一个"float: left“声明，而不是对每个选择器再次声明。我可以给出更多的情况，例如，许多元素的等边距/等边距等等。这与使用变量无关，因为这也会导致对每个选择器的重新声明。这也不是为了避免“分类”。这是关于在编译后的CSS中再次声明规则。而且，如果将来需要向所有浮动元素添加一些清除或任何内容，则只需更改占位符即可。

下面是一个代码示例(请不要介意命名，它只是为了说明情况)：

// Placeholders
%left {
  float: left;
}

%margin {
  margin: 20px;
}

// Selectors, which use the defined placeholders
.selector-1 {
  @extend %left;
  @extend %margin;
  // Other rules
}

.selector-2 {
  @extend %left;
  // Other rules
}

.selector-n {
  @extend %left;
  @extend %margin;
  // Other rules
}

结果产生了以下CSS：

.selector-1,
.selector-2,
.selector-n {
  float: left;
}

.selector-1,
.selector-n {
  margin: 20px;
}

.selector-1 {
  // Other rules
}

.selector-2 {
  // Other rules
}

.selector-n {
  // Other rules
}

而不是：

.selector-1 {
  float: left;
  margin: 20px;
  // Other rules
}

.selector-2 {
  float: left;
  // Other rules
}

.selector-n {
  float: left;
  margin: 20px;
  // Other rules
}

它会对页面性能产生影响吗？它会导致更混乱和更难管理代码吗？你会怎么处理这个问题？

我绝对不是在找一个具体的，最后的答案。只是一些想法，洞察力和个人经历。

Answer 1

这是一个非常有趣的问题，我对其他人的想法也很感兴趣。我使用sass已经有一段时间了，而且在大多数情况下，我倾向于根本不使用@extend功能。在到处浮动的情况下，我可能只需创建一个类.float-left，并将其添加到需要浮动的标记中，或者在选择器规则中只包含float:left。

就代码质量而言，当您正在扩展的东西中只有一条规则时，您并没有真正获得任何可维护性。当涉及到扩展中的2个或更多规则时，这将从可维护性方面提供帮助。另一方面，您仍然可以在标记中添加两个选择器，我对哪一个更好没有强烈的意见。

.float-left-pad {
   float:left;
   padding: 5px;
}

.selector1 {
   @extend:.float-left-pad
   ..
}

div.selector1

vs

.selector1 {
  ...
}

div.selector1.float-lef-pad

我真的不知道您的代码基础是什么，但是我会稍微关注使用@extends来编写可维护的简洁的css。当我有了常用的值或标记时，我倾向于将它们放入混合器或变量中，以促进代码在@extends上的应用。这种方法往往适用于我所从事的复杂项目，但这可能不足以满足其他人的情况。我可以看到使用@extends会产生更简洁的代码的情况，但我认为这是以牺牲sass代码的复杂性为代价的。

我非常怀疑任何方法都会影响页面的性能，使其成为一个问题，如果这样，您可以在它成为一个问题时解决这个问题。在你开始看到绩效下降之前，你不必担心它的表现。