-1

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

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

然而，当我创建一个组件（以ITCSS方式）并且我需要一个始终拥有的特定元素时，比如说 a margin-leftof 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 听起来是一个不错的中间立场。然而，关于它的文章从未涵盖这一特定方面，我想知道遇到同样问题的其他人是怎么想的。

4

1 回答 1

0

我建议使用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();
  }
}
于 2017-09-17T17:47:57.953 回答