Html 边界元法：组件思维和间距

我仍然不能100%确定这是否是正确的思维方式，当使用边界元法时，以及在一般情况下使用一种组件式的造型方式时

假设我们有一个简单的按钮

.btn {
    //wicked styling
}

里面没有间距CSS属性。按钮放置在组件（.comp1）内。因此，imho的BEM组合如下：

HTML

<div class="comp1">
    <a href="comp1__btn btn">Please press me</a>
</div>

第一个问题: 如果.btn在大多数情况下都具有相同的利润率底部：20px，该怎么办？每次我都要做BEM混音吗

//_comp1.scss
.comp1__btn {
    margin-bottom: 20px;
}

// _comp2.scss
.comp2__btn {
    margin-bottom: 20px;
}

当然，我可以在.btn（页边距底部：20px）中做一个一般规则，然后在_comp1.scss等中覆盖它。但是scss的顺序很重要，我想你把一切都搞糟了

这里的最佳实践是什么？SASS扩展

第二个问题（类似）： 对于“更大”的组件，如内部有其他组件的面板，我有一个_verticalrhytim.scss：

//_verticalrhythm.scss
.comp1,
.comp2,
.comp3 {
    margin-bottom: 40px;
}

我最近做了一些项目，效果不错，但我想知道你们是如何管理这些利润的

谢谢回答

如果.btn在大多数情况下都具有相同的利润率底部：20px，该怎么办？每次我都要做BEM混音吗

不应在常规块中包含几何图形或定位样式。有关更多信息，请参阅

但是SCS的顺序很重要我想你把一切都搞砸了

您可以使用一些边界元工具来保证订单。请参阅理论信息并考虑已准备好的实现。

---

至于垂直节奏，你可以创建一个特殊的块，使样式保持在同一个位置，并在每次需要时进行混合。

thx回答。是的，我就是这么做的。我把外部造型融入了bem混搭中。好的-那么也许当值总是相同的时候（在边界元混合中），也许一个变量或@extend就是解决方案。谢谢！

//_verticalrhythm.scss
.comp1,
.comp2,
.comp3 {
    margin-bottom: 40px;
}