Question

在使用BEM时，我仍然不能100％确定这是否是正确的思维方式，并且通常采用组合方式设计样式。

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

.btn {
    //wicked styling
}

里面没有CSS-Attribute间隔。该按钮位于组件（.comp1）内。所以imho来了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延长？

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

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

我最近的项目工作得很好 - 但我想知道你们是如何管理这些保证金的。

回答问题！

Answer 1

如果.btn在大多数情况下具有相同的margin-bottom：20px怎么办？我每次都需要BEM-Mix吗？

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

但是scss的顺序很重要我觉得你搞砸了吗？

您可以使用一些BEM工具来保证订单。请参阅https://en.bem.info/methodology/build/了解理论信息，并将https://github.com/gulp-bem/gulp-bem-bundle-builder视为现成的实施。

对于垂直节奏，你可以创建一个特殊的块来保持造型在同一个地方，并在每次需要时混合它。