Question

我在项目中使用BEMIT（BEM + ITCSS）方法。 BEMIT允许您使用帮助器（“实用程序”），例如.u-hidden来隐藏元素。

我有一个系统，其中任何数值（font-size，margin，padding等）只能是基本单位的倍数。我创建了一个mixin，它基于该基本单元（.u-margin-top-8，.u-margin-top-16等自动生成边距和填充助手），这样我就可以轻松地对元素进行空间化，而无需为其创建特定规则这一点。

然而，当我创建一个组件（以ITCSS方式）并且我需要一个特定的元素时，让我们说margin-left 16px（这是与我的.u-margin-left-16助手一样的规则，我想知道最好的事情是什么：

1）使用HTML

中的助手类

// 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

我建议使用mixin：

// 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();
  }
}

BEMIT：一直使用帮助者而不是在组件中扩展它们而不是在组件中重复它们？

1 个答案: