BEM：如何确保一个块中的 CSS 值覆盖另一个块中定义的 属性 值？

Question

我正在使用 BEM，但在从一个块获取属性以覆盖另一个块中的样式时遇到问题。我知道有些人可能会建议为 .button 添加修饰符，但在某些情况下，某些属性需要应用于单个页面，因此不值得添加整个其他修饰符。

这是一个例子，只是为了说明我的问题：

.button {
  padding-left: 0;
}

现在，当我添加一个 padding-left 时，它得到的是 padding-left: 0; 而不是我想要使用的在 .my-block.

下定义的值

.my-block {
  &__button {
    padding-left: 5px;
  }
}

确保应用 padding-left: 5px; 而不是 padding-left: 0; 的最佳方法是什么？

Answer 1

我假设您使用了 mixes 以便标记如下所示：

<button class="button my-block__button">

如果是这种情况，您需要确保捆绑包中的顺序（.button 的样式应始终在 .my-block__button 之前）。

在 BEM Platform we use deps system 这给了我们保证。