BEM Methology: Component thinking and spacing

I'm still not 100% sure if this is the right way of thinking when working with BEM and in general with a component way of styling stuff.

Let's say we have a simple button.

.btn {
    //wicked styling
}

There's no spacing CSS-Attribute inside. The button is placed inside a component (.comp1). So imho here comes the BEM-Mix:

HTML

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

CSS

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

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

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

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

Of course I could do a general rule in .btn (margin-bottom: 20px) and then overwrite it in the _comp1.scss etc. But then the order of the scss matters I think you mess up everthing?

What is here the best practice? SASS Extend?

Second question (similar): For "bigger" components like a panel with other components inside I have like a _verticalrhythm.scss:

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

I recent projects it worked pretty good - but I'm wondering how do you guys are managing these margin stuff.

Thx for answering!

Solution

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

You should not include geometry or positioning styling in general blocks. See https://en.bem.info/methodology/css/#external-geometry-and-positioning for more info.

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

You may use some BEM tooling to guarantee order. See https://en.bem.info/methodology/build/ for theoretical info and consider https://github.com/gulp-bem/gulp-bem-bundle-builder as ready made implementation.

As for vertical rhythm you may create special block to keep styling at the same place and mix it every time you need it.