使用 SASS mixin 还是创建单独的类更好？ [关闭]

Question

在我们的项目中，我们使用 SASS 进行样式开发。此外，我们使用 Bootstrap，它包含下一个众所周知的 mixin：

@mixin clearfix {
    *zoom: 1;
    &:before,
    &:after {
        display: table;
        content: "";
        // Fixes Opera/contenteditable bug:
        // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
        line-height: 0;
    }
    &:after {
        clear: both;
    }
}

我们在我们的风格中使用它：

.class-example {
   @include clearfix();
   . . .
}

编译成 CSS 后，SASS 将 mixin 的所有内容复制到我们使用 mixin 的每个类中。因此，这是大量重复的代码。我们使用 mixin 大约 100 次，所以在 css 中大约多出了 1000 行。

那么，问题来了：性能/支持/可读性/等哪个更好。观点

1. 使用 mixin 并允许重复代码
2. 创建类.clearfix 并在<span class="example-class clearfix"> ... </span> 等标记中使用它以避免重复

另外，如果有人有更好的解决方案 - 我会很高兴得到它。欢迎任何 cmets/讨论。

Answer 1

我建议将其设置为“助手”类，正如您所说的那样，它们更加敏捷，您可以将它们放在需要的地方，根据情况也有不同的清除修复，有些是溢出修复有些是表格布局修复等等，我宁愿创建一个类并将它们添加到需要的地方，这也使您的布局类独立于明确的修复。因此，它们可以作为独立且可重用的代码存在，而不必担心 clearfix 可能会弄乱潜在的布局:)

我将它们用作类，以便更好、更敏捷地进行布局。

编辑，所以我会说你的解决方案 2 也是最好的，因为你不是说复制 100 行代码。

Answer 2

我在当前项目中使用 bootstrap 的 less 文件，它在 mixins.less 文件中有以下内容：

// UTILITY MIXINS
// --------------------------------------------------

// Clearfix
// --------
.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

我们可以定义所谓的“mixins”，它与编程语言中的函数有一些相似之处。它们用于将 CSS 指令分组到方便、可重用的类中。 Mixins 允许您通过简单地将类名作为其属性之一将类的所有属性嵌入到另一个类中。它就像变量一样，但适用于整个类。任何 CSS 类或 id 规则集都可以这样混合：

.container{
.clearfix();
}

就clearfix 而言，我只是将它用作 clearfix，因为它正在执行一项任务，即清除浮动，即引导程序提供一个类来完成特定任务。它独立于其他类。 您可以像这样在 html 中使用它：

<div class="clearfix"></div>

Answer 3

首先，我想提一下，将overflow: hidden 应用于具有浮动子元素的元素会清除浮动，就像包含您正在谈论的clearfix 混合一样。

就可读性和性能而言，这可能是明显的赢家。我没有任何数据支持overflow: hidden 实际上比clearfix 渲染得更快，但如果确实如此，我不会感到惊讶。不过，它的 CSS 少得多，因此就下载数据而言，它绝对是赢家。

虽然您的布局可能有一些相对定位，但并不总是可以使用overflow: hidden。在这些情况下，最佳性能方法是为.clearfix 创建一个全局类，并将其应用于所有应该清除其子元素的元素。虽然它听起来不容易维护，但我认为在整个 CSS 中包含该 mixin 更容易维护，因为您无需在进行更改时清除缓存的 CSS。

我的建议是同时使用 overflow: hidden 和 .clearfix。 废品 @include clearfix。

原因是你不能总是只用一种方法（有时你可能想使用 :after 元素来做其他事情，有时你可能希望内容延伸到它们的容器之外） 所以不管怎样，两者都可用是有意义的。

通过这两种方法，您可以适应任何情况。请记住，您可以将 overflow: hidden 绑定到类名以使其与 DRY 和 .clearfix 一样。

我的 2 美分。

编辑：

或者，您可以使用@extend 来创建这样的输出：

.element-1,
.element-2,
.element-3,
.element-4,
.element-5 {
  // clearfix stuff
}

因此 clearfix 是在一个地方定义的，而不是在文档中多次定义。就我个人而言，我不是它的忠实粉丝，但也许它对你有意义。

Answer 4

我建议使用 mixin，并且不用担心对性能的影响很小。将来，如果您不想再对某些内容类型使用 clearfix，则必须遍历所有 html 以删除标记。

保持标记干净并在 css 中进行布局和样式设置总是更安全。在这种情况下，您会受到非常小的性能影响，以便在未来的支持方面节省您自己。如果您将性能视为一个问题，您可能需要考虑设置标记或 css 的方法，这样您就不会有太多调用 .clearfix 的类。

Answer 5

就像其他人已经说过的那样，对于像这样的简单实用程序 mixin，我会将其定义为扩展，如下所示：

%clearfix {
    //clearfix code
}

然后像这样在 SASS 中使用它：

.container{
    @extend %clearfix;
}

这样，无论你扩展多少次，它输出的代码在 CSS 中只会出现一次，而不是数百次。

我反对在标记中使用诸如 clearfloat 或 clearfix 之类的类，除非你真的需要——既然你可以用 CSS 做得更好更快，为什么还要混淆标记呢？无需跟踪大量不同的标记文件，您可以在 SASS 文件中的一处轻松更改它。

这使您可以将所有东西都放在一个地方，而不是分散在多个地方，这使得维护变得更加容易，正如我从经验中知道的那样。

Answer 6

首先！

我首先建议不要使用溢出：隐藏。这是一种 hack，因此会导致未来人们混淆代码，尤其是应用此代码的任何企业的新手。JavaScript 开发人员还必须应对任何与职位相关的元素的影响。

那么，在任何地方都应用 clearfix 类或仅在 SASS 中应用 include 的优点和缺点是什么？

clearfix 类

在 DOM 元素上的 clearfix 显示内容是浮动的，任何人都无需进一步查看。 clearfix 样式只编写一次，使您的样式表文件更小。

@include 清除修复

太棒了，让我们在任何地方都使用包含并扩展我们的样式表质量吧。可是等等！我确实找到了一个真正使用它的有趣机会，正是出于这个原因，我会这样做。

如果你的类不在需要 clearfix 的模板中，那么就写在整个 DOM 中。我可以想象想要使用包含选项。虽然这种情况相当罕见。

此外，由于页面上发生响应式更改的类突然需要一个 clearfix，您可以将它包含在一个漂亮的 @import media() 中，例如波旁整洁。但即使这样也很少见，因为您可以再次应用 clearfix 并从一开始就完成它。

结论

我认为需要一种快乐的媒介，在编写 SASS 时应该始终如此。但这是我个人的看法：-P