BEM 方法：不同的问题（重置、混合或修改器）答案

【问题标题】：BEM Methology: Different Questions (Resetting, Mix or modifier)BEM 方法：不同的问题（重置、混合或修改器）
【发布时间】：2017-02-20 20:28:21
【问题描述】：

重置类：

假设我有一个 _base.scss 并且有

ul { 
     margin-top: 20px;
     margin-bottom: 10px;
}

BEM 中始终重置相同内容的最佳方法是什么。我读到全局类不是“允许的”。我是否必须做一个 scss-placeholder (%resetUl) 然后扩展 ul-list 或者这里允许某种全局类？前任。

<ul class="resetUl">
    <li class="resetLi">
</ul>

BEM 混合或修饰符： 我有两个类似的按钮。一个按钮为 16 像素，另一个按钮为 20 像素。小个子（16px 字体大小）总是在另一个组件里面。我必须在这里做混合或修饰吗？

混合：

<div class="header">
    <a class="header__item btn"></div>
</div>

修饰符：

<div class="header">
    <a class="btn btn--small"></a>
</div>

如果设计师以某种方式说“我想要那个按钮也在另一部分......嗯......让我们说......嗯，页脚”......

混音：

.header__item,
.footer__item {
      font-size: 16px;
 }

带修饰符：

.btn { 
    //button stuff
}

.btn--small {
    font-size: 16px;
}

在我写这篇文章时，似乎字体大小或颜色之类的东西是修饰符，而边距之类的东西是混合的？

在这种情况下，间距（边距）问题：您是否已经在组件中或在它的 BEM-Mix 中添加了保证金？让我们再说一个简单的按钮。我知道这一切皆有可能，但试图抓住一些利弊。

谢谢:)

【问题讨论】：

标签： html css bem

【解决方案1】：

1) 您可以创建多个占位符来重置某些属性。例如%reset-list、%reset-button。并用其扩展组件。 .button { @extent %reset-button; }.

2) 修饰符或混合。我认为所有外部样式（如边距和定位）都应由父组合设置。但是所有内部属性，如颜色、字体大小等都应该由修饰符设置。因为元素不知道外部上下文。并且父块也不知道它的子块（不是__element）是如何产生的。

在你的情况下：

<div class="header">
    <a class="header__item btn btn--small"></div>
</div>

.header__item {
    position: absolute; // for example
}

.btn--small {
    font-size: 16px;
}

【讨论】：