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

Question

:)

重置类:

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

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

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

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

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

混合：

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

修改器：

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

如果设计师说 "I want that button also in another part...hmm..let's say...ehmm the footer"...

混音：

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

有修饰符：

.btn { 
    //button stuff
}

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

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

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

谢谢:)

Answer 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;
}

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

BEM Methology: Different Questions (Resetting, Mix or modifier)

html

css

bem