Question

我一直在遵循BEM方法，我不确定我是否正确行事，因为我有时候会选择很多课程。我想保持我的代码模块化和可重用，所以我开始使用mixins和占位符。但在某些情况下，我最终会得到这样的代码：

让代码可重用，例如以下scss：

特定于类的scss文件：

.l-page-width {
  display: inline-block;

  &_background_white {
    @extend %background_white;
  } 

  &_padding_bot-top {
   @extend %padding_bot-top;
  }

  &_center_absolute {
   @extend %center_absolute;
  }
}

占位符：

%background {
  &_white {
    background: $white;
  }
}

%padding {
  &_bot-top {
    padding-bottom: span(.35);
    padding-top: span(.35);
  }
}

%center {
  &_absolute {
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 0;
  }
}

HTML

<div class="l-page-width l-page-width_background_white l-page-width_padding_bot-top l-page-width_center_absolute">

<div class="c-quote c-quote_padding_lr">
            <h1 class="c-quote__title c-quote__title_outline_black">
              Title Here
            </h1>
            <p class="c-quote__content">
                content text here
            </p>
        </div>
</div>

我一直在阅读bem信息网站并想出了它，现在更有意义了：

<div class="l-page-width">
    <div class="l-page-width__c-quote c-quote">
        <h1 class="c-quote__title c-quote__title_outline_black">
          Title Here
        </h1>
        <p class="c-quote__content">
            content text here
        </p>
    </div>
</div>

scss：

.l-page-width__c-quote {
  @extend %background_white;
  @extend %padding_bot-top;
  @extend %padding_lr;
  @extend %align_center;
}

我

Answer 1

不要试图让你的代码变得复杂，不要试图使用吨或助手，mixins等。尝试编写简单且完整的代码 l-page-width__c-quote c-quote - 这个选择器说明了元素。我甚至无法想象它是什么。不要试图以这种方式命名类，它们描述了元素的外观。完美的类名是：news，news__title，news__date等不要使用你的自定义前缀 - 除了你不知道它们是什么意思之外没有人两次写相同的代码没有错。更糟糕的是当你需要修改由相同mixins或占位符组成的两个块中的一个时，或者试图理解为什么某个元素具有这种外观。

我没有打电话放弃mixins或占位符。我们只需要谨慎使用它们。

BEM课程太多了？

1 个答案: