使用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>以避免重复

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

Answer 1

首先,我想提一下,申请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是在一个地方而不是在文档中多次定义的.就个人而言,我不是它的忠实粉丝,但也许这对你有意义.