11

在我们的项目中，我们使用 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>以避免重复

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

4

6 回答 6

6

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

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

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

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

原因是你不能总是只使用一种方法（有时你可能想将 :after 元素用于其他东西，有时你可能希望内容延伸到它们的容器之外），所以无论如何都有这两种方法都是有意义的。

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

我的 2 美分。

编辑：

或者，但可能不理想，您可以使用@extend创建这样的输出：

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

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

于 2013-10-14T17:17:07.423 回答
3

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

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

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

于 2013-10-11T07:40:40.503 回答
3

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

%clearfix {
    //clearfix code
}

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

.container{
    @extend %clearfix;
}

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

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

根据我的经验，这使您可以将所有东西都放在一个地方，而不是分散在许多地方，这使得维护变得更加容易。

于 2013-10-18T14:21:10.377 回答
1

我在当前项目中使用引导程序的 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>
于 2013-10-14T14:15:55.967 回答
1

我推荐使用 mixin 并且不用担心对性能的影响很小。将来，如果您不再希望在某些内容类型上使用 clearfix，则必须检查所有 html 以删除标记。

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

于 2013-10-17T15:25:32.677 回答
-1

首先！

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

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

清除类

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

@include 清除修复

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

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

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

结论

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

于 2015-08-05T10:11:55.667 回答