BEM 方法论：组件思维和间距

Question

我仍然不能 100% 确定这是否是使用 BEM 时的正确思维方式，以及通常使用组件样式的方式。

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

.btn {
    //wicked styling
}

里面没有间距CSS-属性。该按钮位于组件 (.comp1) 内。所以恕我直言，BEM-Mix 来了：

HTML

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

CSS

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

第一个问题：如果 .btn 在大多数情况下具有相同的 margin-bottom: 20px 怎么办？我必须每次都使用 BEM-Mix 吗？

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

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

当然我可以在 .btn 中做一个通用规则（margin-bottom：20px）然后在 _comp1.scss 等中覆盖它。但是 scss 的顺序很重要我认为你搞砸了一切？

最佳做法是什么？ SASS 延长？

第二题（类似）：对于 "bigger" 组件，比如内部有其他组件的面板，我喜欢 _verticalrhythm.scss:

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

我最近的项目效果很好 - 但我想知道你们是如何管理这些利润的。

感谢回答！

Answer 1

What if the .btn has in most cases the same margin-bottom: 20px? Do I have to everytime a BEM-Mix?

您不应在常规块中包含几何或定位样式。有关详细信息，请参阅 https://en.bem.info/methodology/css/#external-geometry-and-positioning。

But then the order of the scss matters I think you mess up everthing?

您可以使用一些 BEM 工具来保证顺序。将 https://en.bem.info/methodology/build/ for theoretical info and consider https://github.com/gulp-bem/gulp-bem-bundle-builder 视为现成的实施。

至于垂直节奏，您可以创建特殊块以将样式保持在同一位置并在每次需要时混合它。

BEM Methology: Component thinking and spacing