CSS 预处理器 mixins 与标记类

Question

我正处于一个项目的早期阶段，随着它的发展，它会积累大量的样式。我们正在讨论 CSS 预处理器 mixin 模式在干燥我们的样式代码方面的优点。当 mixin 被参数化时，好处是相当明显的——几乎每个实例都必须手写，因此代码膨胀相对较少，尤其是在不经常使用特定参数化的情况下。

但是，对于未参数化的 mixin，它有点模糊。以清除固定为例。

在纯 CSS 中，我们可能会创建一个 cf 类，然后在必要时在标记中调用它。这很好用，但会在标记中添加纯粹的演示类。

在 SASS 中，我们可以通过使用 mixin 来避免这种情况：

//in _mixins.scss
@mixin clear-fix() {
  &:before, &:after {
    content: '\0020';
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    width: 0;
    height: 0;
  }
}

//in my_component.scss
@import 'mixins';

.my_component {
  // styles ...
  @include clear-fix() 
}

这样做的好处是集中了纯粹的表现性关注点，并使我们的样式代码更易于维护。但缺点是编译后的 CSS 会非常不干，clear-fix mixin 在混入的每个块中逐字重复（将此应用于我们以相同方式使用的任何类似 CSS 模式）。

我的问题是混合代码的重复是否可能导致任何重大问题？还是有其他我没有想到的解决方案？

Answer 1

您的另一个选择是使用extend。这将是一种 DRYer 方法，而不是一直重复使用 mixin，因为它用逗号分隔选择器而不是复制样式。

示例

.bacon {      
    color: red; 
}

.smokey {
   @extend .bacon;
}

// Outputs
.bacon, .smokey {
  color: red;
}

http://css-tricks.com/the-extend-concept/

Answer 2

我认为您给出的示例的主要缺点是您在使用 clearfix 的任何地方都在重复自己...所以在您的示例中，如果您有 100 个使用 clear-fix 类的元素，您将拥有693 行多余的 CSS 是不需要的。

两个建议：

1. 只有当 mixin 带有参数并且 CSS 属性实际改变值时，我才会使用它们。使用“void”mixins 似乎效率低下，因为您可以使用普通的旧 CSS。
2. 在这里查看 stubbornella 的面向对象的 CSS：https://github.com/stubbornella/oocss/wiki。如果你将clear-fix mixin 抽象为一个可重用的 CSS 对象，你会变得更加 DRY（尽管你仍然会重复自己一点点）