BEM Methology: Different Questions (Resetting, Mix or modifier)

Question

:)

Resetting Classes:

Let's say I have a _base.scss and there is

ul { 
     margin-top: 20px;
     margin-bottom: 10px;
} 

What is the best approach in BEM to reset always the same stuff. I read that global classes are not "allowed". Do I have to do for example a a scss-placeholder (%resetUl) and then extend the ul-list or is some kind of global classes allowed here? ex.

<ul class="resetUl">
    <li class="resetLi">
</ul>

BEM Mix or modifier: I have two similar buttons. One button with 16px and the other one with 20px font size. The little one (16px font size) is always in another component inside. Do I have to do here a mix or a modifier?

Mix:

<div class="header">
    <a class="header__item btn"></div>
</div>

Modifier:

<div class="header">
    <a class="btn btn--small"></a>
</div>

What if somehow the designer says "I want that button also in another part...hmm..let's say...ehmm the footer"...

With the Mix:

.header__item,
.footer__item {
      font-size: 16px;
 }

With Modifier:

.btn { 
    //button stuff
}

.btn--small {
    font-size: 16px;
}

While I'm writing this it seems that stuff like font-size, or color is a modifier and stuff like margin is a mix?

And in that context a spacing (margin) question: Do you margin stuff already in the component or in the BEM-Mix of it? Let's say again a simple button. I know it's all possible but trying to catch some pro and cons.

Thanks :)

Answer 1

1) You can create several placeholders for reset some properties. For example %reset-list, %reset-button. And extend components with its. .button { @extent %reset-button; }.

2) Modifier or mix. I think that all external styles like margins and positioning should be set by parent mix. But all internal properties like colors, font-sizes etc should be set by modifier. Because element don't know about external context. And parent block also don't know how its children (not __element) made.

In your case:

<div class="header">
    <a class="header__item btn btn--small"></div>
</div>

.header__item {
    position: absolute; // for example
}

.btn--small {
    font-size: 16px;
}