Методология БЭМ: разные вопросы (сброс, микс или модификатор)

:)

Сброс классов:

Допустим, у меня есть _base.scss и есть

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

Каков наилучший подход в БЭМ, чтобы всегда сбрасывать одно и то же. Я читал, что глобальные классы не разрешены. Должен ли я сделать, например, scss-placeholder (%resetUl), а затем расширить список ul или здесь разрешены какие-то глобальные классы? бывший.

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

BEM Mix или modifier: у меня есть две похожие кнопки. Одна кнопка с размером шрифта 16 пикселей, а другая с размером шрифта 20 пикселей. Маленький (размер шрифта 16px) всегда находится внутри другого компонента. Должен ли я делать здесь микс или модификатор?

Смешивание:

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

Модификатор:

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

Что, если дизайнер каким-то образом скажет: «Я хочу, чтобы эта кнопка была и в другой части… хм… скажем… хм, в нижнем колонтитуле»…

С миксом:

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

С модификатором:

.btn { 
    //button stuff
}

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

Пока я пишу это, кажется, что такие вещи, как размер шрифта или цвет, являются модификаторами, а такие вещи, как поля, - это смесь?

И в этом контексте вопрос о промежутке (марже): вы уже делаете маржу в компоненте или в его БЭМ-миксе? Скажем снова простая кнопка. Я знаю, что все возможно, но пытаюсь понять некоторые плюсы и минусы.

Спасибо :)


html css bem
person kingmauri    schedule 12.10.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

1) Вы можете создать несколько заполнителей для сброса некоторых свойств. Например %reset-list, %reset-button. И расширить компоненты с его. .button { @extent %reset-button; }.

2) Модификатор или смесь. Я думаю, что все внешние стили, такие как поля и позиционирование, должны быть установлены родительским миксом. Но все внутренние свойства, такие как цвета, размеры шрифта и т. д., должны быть установлены модификатором. Потому что элемент не знает о внешнем контексте. И родительский блок также не знает, как сделаны его дочерние элементы (не __element).

В твоем случае:

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

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

.btn--small {
    font-size: 16px;
}
person 3rdthemagical    schedule 13.10.2016