BEMIT:一直使用助手，在组件中扩展它们，在组件中重复它们？

Question

我在一个项目中使用BEMIT (边界元+ ITCSS)方法。BEMIT允许您使用帮助器(“实用程序”)(如.u-hidden )隐藏元素。

我有一个系统，其中任何数值(font-size、margin、padding等)只能是一个基本单位的倍数。我创建了一个混合器，根据这个基本单元(.u-margin-top-8、.u-margin-top-16等)自动生成页边距和填充助手。这样，我就可以轻松地空间元素，而不必为此创建一个特定的规则。

然而，当我创建一个组件(以ITCSS的方式)并且需要一个特定的元素时，让我们假设一个margin-left of 16px (这是与我的.u-margin-left-16助手相同的规则)时，我想知道最好做什么：

1)在HTML中使用helper类

// SCSS
$spacing-unit: 8;

.u-margin-left-16 {
    margin-left: #{$spacing-unit * 2}px;
}

.c-block {
   &__element {
       ...
   }
}

// HTML
<div class="c-block">
    <div class="c-block__element u-margin-left-16">
        ...
    </div>
</div>

• 的优点：不需要编写额外的CSS
• 的缺点：每次都必须在HTML中重复

2)扩展组件代码中的助手类(使用@extend)

// SCSS
$spacing-unit: 8;

.u-margin-left-16 {
    margin-left: #{$spacing-unit * 2}px;
}

.c-block {
   &__element {
       @extend .u-margin-left-16;
   }
}

// HTML
<div class="c-block">
    <div class="c-block__element">
        ...
    </div>
</div>

• 的优点：组件可以开箱即用，重用现有规则
• 的缺点：生成的CSS可能导致规则顺序问题。

3)重复代码，而不考虑现有类

// SCSS
$spacing-unit: 8;

.u-margin-left-16 {
    margin-left: #{$spacing-unit * 2}px;
}

.c-block {
   &__element {
       margin-left: #{$spacing-unit * 2}px;
   }
}

// HTML
<div class="c-block">
    <div class="c-block__element">
        ...
    </div>
</div>

• 的优点：组件可以开箱即用
• 缺点：重复代码

我明白，使用帮助可以被认为是一个冲突的概念，使用组件(BEM的块)，因为一个赞成组合，另一个赞成继承，但BEMIT听起来像是一个不错的中间地带。然而，关于这个问题的文章从来没有涉及到这一个特定的方面，我想知道其他遇到同样问题的人是怎么想的。

Answer 1

我建议用混合液：

// SCSS
$spacing-unit: 8;

@mixin u-margin-left-16 {
  margin-left: #{$spacing-unit * 2}px;
}

.u-margin-left-16 {
  @include u-margin-left-16();
}

.c-block {
  &__element {
    @include u-margin-left-16();
  }
}