html - BEM 方法论 : Component thinking and spacing

Question

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

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

.btn {
    //wicked styling
}

里面没有间距CSS-Attribute。该按钮位于组件 (.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 扩展？

第二个问题(类似):对于“更大”的组件，比如内部有其他组件的面板，我有一个 _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?

您不应在常规 block 中包含几何或定位样式。参见 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/有关理论信息，请考虑 https://github.com/gulp-bem/gulp-bem-bundle-builder作为现成的实现。

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